Lab 1: Social Login Lab¶

Setup a Google Project¶

1. Login at https://console.developers.google.com

   

   Note

   This portion of the exercise requires a Google Account. You may use an existing one or create one for the purposes of this lab

2. Click Create Project and give it a name like “OAuth Lab” and click Create

   

   

   Note

   You may have existing projects so the menus may be slightly different.

   Note

   You may have to click on Google+ API under Social APIs

3. Go to the Credentials section on the left side.

   

   Note

   You may have navigate to your OAuth Lab project depending on your browser or prior work in Google Developer

4. Click OAuth Consent Screen tab, fill out the product name with “OAuth Lab”, then click save

   

5. Go to the Credentials tab (if you are not taken there), click Create Credentials and select OAuth Client ID

   

6. Under the Create Client ID screen, select and enter the following values and click Create

   • Application Type: Web Application
   • Name: OAuth Lab
   • Authorized Javascript Origins: https://social.f5agility.com
   • Authorized Redirect URIs: https://social.f5agility.com/oauth/client/redirect

   

7. Copy the Client ID and Client Secret to notepad, or you can get it by clicking on the OAuth Lab Credentials section later if needed. You will need these when you setup Access Policy Manager (APM).

   

8. Click Library in the left-hand navigation section, then select Google+ API under Social APIs or search for it

   

9. Click Enable and wait for it to complete, you will now be able to view reporting on usage here

   

   
   

   

10. For Reference: This is a screenshot of the completed Google project:

    

Configure Access Policy Manager (APM) to authenticate with Google¶

1. Configure the OAuth Server Object: Go to Access -> Federation -> OAuth Client / Resource Server -> OAuth Server and click Create

   

2. Enter the values as shown below for the OAuth Server and click Finished

   • Name: Google
   • Mode: Client + Resource Server
   • Type: Google
   • OAuth Provider: Google
   • DNS Resolver: oauth-dns *(configured for you)*
   • Client ID: <Client ID from Google>
   • Client Secret: <Client Secret from Google>
   • Client’s ServerSSL Profile Name: apm-default-serverssl
   • Resource Server ID: <Client ID from Google>
   • Resource Server Secret: <Client Secret from Google>
   • Resource Server’s ServerSSL Profile Name: apm-default-serverssl

   

3. Configure the VPE for Google: Go to Access -> Profiles / Policies -> Access Profiles (Per Session Policies) and click Edit on social-ap, a new browser tab will open

   

4. Click the + on the Google provider’s branch after the OAuth Logon Page

   

5. Select OAuth Client from the Authentication tab and click Add Item

   

6. Enter the following in the OAuth Client input screen and click Save

   • Name: Google OAuth Client
   • Server: /Common/Google
   • Grant Type: Authorization Code
   • Authentication Redirect Request: /Common/GoogleAuthRedirectRequest
   • Token Request: /Common/GoogleTokenRequest
   • Refresh Token Request: /Common/GoogleTokenRefreshRequest
   • Validate Token Request: /Common/GoogleValidationScopesRequest
   • Redirection URI: https://%{session.server.network.name}/oauth/client/redirect
   • Scope: profile

   

7. Click + on the Successful branch after the Google OAuth Client

   

8. Select OAuth Scope from the Authentication tab, and click Add Item

   

9. Enter the following on the OAuth Scope input screen and click Save

   • Name: Google OAuth Scope
   • Server: /Common/Google
   • Scopes Request: /Common/GoogleValidationScopesRequest

• Click Add New Entry

  • Scope Name: https://www.googleapis.com/auth/userinfo.profile
  • Request: /Common/GoogleScopeUserInfoProfileRequest

  

1. Click the + on the Successful branch after the

   Google OAuth Scope object

   

2. Select Variable Assign from the Assignment tab, and click

   Add Item

   

3. Name it Google Variable Assign and click Add New Entry then change

   

4. Enter the following values and click Finished

   Left Side:

   • Type: Custom Variable
   • Security: Unsecure
   • Value: session.logon.last.username

   Right Side:

   • Type: Session Variable
   • Session Variable: session.oauth.scope.last.scope_data.userinfo.profile.displayName

   

5. Review the Google Variable Assign object and click Save

   

6. Click Deny on the Fallback branch after the Google Variable Assign object, select Allow in the pop up window and click Save

   

7. Click Apply Access Policy in the top left and then close the tab

   

Test Configuration¶

1. Test by opening Chrome in the jump host and browsing to https://social.f5agility.com, select the provider and attempt logon.

   

   Note

   You are able to login and reach the app now, but SSO to the app has not been setup so you get an application error.

   Note

   You may also be prompted for additional security measures as you are logging in from a new location.

Setup a Facebook Project¶

1. Go to https://developers.facebook.com and Login

   Note

   This portion of the exercise requires a Facebook Account. You may use an existing one or create one for the purposes of this lab

   

2. If prompted click, Get Started and accept the Developer Policy. Otherwise, click Create App

   

3. Click Create App and name (Display Name) your app (Or click the top left project drop down and create a new app, then name it). Then click Create App ID.

   Note

   For example the Display Name given here was “OAuth Lab”. You may also be prompted with a security captcha

   

4. Click Get Started in the Facebook Login section (Or click + Add Product and then Get Started for Facebook)

   

5. From the “Choose a Platform” screen click on WWW (Web)

   

6. In the “Tell Us about Your Website” prompt, enter https://social.f5agility.com for the Site URL and click Save then click Continue

   

7. Click Next on the “Set Up the Facebook SDK for Javascript” screen

   

8. Click Next on the “Check Login Status” screen

   Note

   Additional screen content removed.

   

9. Click Next on the “Add the Facebook Login Button” screen

   

10. Click Facebook Login on the left side bar and then click Settings

    

11. For the Client OAuth Settings screen in the Valid OAuth redirect URIs enter https://social.f5agility.com/oauth/client/redirect and then click enter to create it, then Save Changes

    

12. Click Dashboard in the left navigation bar

    

13. Here you can retrieve your App ID and App Secret for use in Access Policy Manager (APM).

    

    Screenshot of completed Facebook project

    Note

    If you want Facebook Auth to work for users other than the developer you will need to publish the project

Configure Access Policy Manager (APM) to authenticate with Facebook¶

1. Configure the OAuth Server Object: Go to Access -> Federation -> OAuth Client / Resource Server -> OAuth Server and click Create

   

2. Enter the values as shown below for the OAuth Server and click Finished

   • Name: Facebook
   • Mode: Client + Resource Server
   • Type: Facebook
   • OAuth Provider: Facebook
   • DNS Resolver: oauth-dns (configured for you)
   • Client ID: <App ID from Facebook>
   • Client Secret: <App Secret from Facebook>
   • Client’s ServerSSL Profile Name: apm-default-serverssl
   • Resource Server ID: “ App ID from Facebook>“
   • Resource Server Secret: <App Secret from Facebook>
   • Resource Server’s ServerSSL Profile Name: apm-default-serverssl

   

3. Configure the VPE for Facebook: Go to Access -> Profiles / Policies -> Access Profiles (Per Session Policies) and click Edit on social-ap, a new browser tab will open

   

4. Click the + on the Facebook provider’s branch after the OAuth Logon Page

   

5. Select OAuth Client from the Authentication tab and click Add Item

   

6. Enter the following in the OAuth Client input screen and click Save

   • Name: Facebook OAuth Client
   • Server: /Common/Facebook
   • Grant Type: Authorization Code
   • Authentication Redirect Request: /Common/FacebookAuthRedirectRequest
   • Token Request: /Common/FacebookTokenRequest
   • Refresh Token Request: None
   • Validate Token Request: “ /Common/FacebookValidationScopesRequest“
   • Redirection URI: https://%{session.server.network.name}/oauth/client/redirect
   • Scope: public_profile (Note underscore)

   

7. Click + on the Successful branch after the Facebook OAuth Client

   

8. Select OAuth Scope from the Authentication tab, and click Add Item

   

9. Enter the following on the OAuth Scope input screen and click Save

   • Name: Facebook OAuth Scope
   • Server: /Common/Facebook
   • Scopes Request: /Common/FacebookValidationScopesRequest
   • Click Add New Entry
   • Scope Name: public_profile
   • Request: /Common/FacebookScopePublicProfile

   

10. Click the + on the Successful branch after the Facebook OAuth Scope object

    

11. Select Variable Assign from the Assignment tab, and click Add Item

    

12. Name it Facebook Variable Assign and click Add New Entry then change

    

13. Enter the following values and click Finished

    Left Side:

    • Type: Custom Variable
    • Security: Unsecure
    • Value: session.logon.last.username

    Right Side:

    • Type: Session Variable
    • Session Variable: session.oauth.scope.last.scope_data.public_profile.name

    

14. Review the Facebook Variable Assign object and click Save

    

15. Click Deny on the Fallback branch after the Facebook Variable Assign object, select Allow in the pop up window and click Save

    

16. Click Apply Access Policy in the top left and then close the tab

    

Configure Access Policy Manager (APM) to authenticate with LinkedIn¶

1. Configure the OAuth Server Object: Go to Access -> Federation -> OAuth Client / Resource Server -> Provider and click Create

   

   Note

   You are creating a “Provider”

2. Enter the values as shown below for the OAuth Provider and click Finished

   • Name: LinkedIn
   • Type: Custom
   • Authentication URI: https://www.linkedin.com/oauth/v2/authorization
   • Token URI: https://www.linkedin.com/oauth/v2/accessToken
   • Token Validation Scope URI: https://www.linkedin.com/v1/people/~

   

3. Configure the OAuth Redirect Request Profile Object: Go to Access -> Federation -> OAuth Client / Resource Server -> Request and click Create

   

4. Enter the values as shown for the OAuth Request and click Finished

   • Name: LinkedInAuthRedirectRequest
   • HTTP Method: GET
   • Type: auth-redirect-request

   

5. Add the following request parameters and click Add after entering the values for each:

   • Parameter Type: custom
   • Parameter Name: response_type
   • Parameter Value: code
   • Parameter Type: client-id
   • Parameter Name: client_id
   • Parameter Type: redirect-uri
   • Parameter Name: redirect_uri
   • Parameter Type: scope
   • Parameter Name: scope

   Note

   LinkedIn requires a state parameter, but we already insert it by default.

   

6. Configure the OAuth Token Request Profile Object: Go to Access -> Federation -> OAuth Client / Resource Server -> Request and click Create

   

7. Enter the values as shown for the OAuth Request and click Finished

   • Name: LinkedInTokenRequest
   • HTTP Method: POST
   • Type: token-request

   

8. Add the following request parameters and click Add after entering the values for each:

   • Parameter Type: grant-type
   • Parameter Name: grant_type
   • Parameter Type: redirect-uri
   • Parameter Name: redirect_uri
   • Parameter Type: client-id
   • Parameter Name: client_id
   • Parameter Type: client-secret
   • Parameter Name: client_secret

   

9. Configure the OAuth Validation Scopes Request Profile Object: Go to Access -> Federation -> OAuth Client / Resource Server -> Request and click Create

   

10. Enter the values as shown for the OAuth Request and click Finished

    • Name: LinkedInValidationScopesRequest
    • HTTP Method: GET
    • Type: validation-scopes-request

    

11. Add the following request parameters and click Add after entering the values for each:

    • Parameter Type: custom
    • Parameter Name: oauth2_access_token
    • Parameter Value: %{session.oauth.client.last.access_token}
    • Parameter Type: custom
    • Parameter Name: format
    • Parameter Value: json

    

12. Configure the OAuth Scope Data Request Profile Object: Go to Access -> Federation -> OAuth Client / Resource Server -> Request and click Create

    

13. Enter the values as shown for the OAuth Request and click Finished

    • Name: LinkedInScopeBasicProfile
    • HTTP Method: GET
    • URI: https://api.linkedin.com/v1/people/~
    • Type: scope-data-request

    

14. Add the following request parameters and click Add after entering the values for each:

    • Parameter Type: custom
    • Parameter Name: “ oauth2_access_token“
    • Parameter Value: %{session.oauth.client.last.access_token}
    • Parameter Type: custom
    • Parameter Name: format
    • Parameter Value: json

    

15. Configure the OAuth Server Object: Go to Access -> Federation -> OAuth Client / Resource Server -> OAuth Server and click Create

    

16. Enter the values as shown below for the OAuth Server and click Finished

    • Name: LinkedIn
    • Mode: Client + Resource Server
    • Type: Custom
    • OAuth Provider: LinkedIn
    • DNS Resolver: oauth-dns *(configured for you)*
    • Client ID: <App ID from LinkedIn>
    • Client Secret: <App Secret from LinkedIn >
    • Client’s ServerSSL Profile Name: apm-default-serverssl
    • Resource Server ID: <App ID from LinkedIn >
    • Resource Server Secret: <App Secret from LinkedIn >
    • Resource Server’s ServerSSL Profile Name: apm-default-serverssl

    

17. Configure the VPE for LinkedIn: Go to Access -> Profiles / Policies -> Access Profiles (Per Session Policies) and click Edit on social-ap, a new browser tab will open

    

18. Click on the link OAuth Logon Page as shown

    

19. Click on the Values area of Line #1 as shown. A pop-up window will appear

    

20. Click Add Option. In the new Line 3, type LinkedIn in both the Value and Text (Optional) fields and click Finished

    

21. Click on the Branch Rules tab of the OAuth Logon Page screen

    

22. Click Add Branch Rule. In the resulting new line enter LinkedIn for the Name field and click the Change link on the Expression line

    

23. Click Add Expression on the Simple tab

    

24. Select OAuth Logon Page in the Agent Sel: drop down. Select OAuth provider type from the Condition drop down. In the OAuth provider field enter LinkedIn and then click Add Expression

    

25. Click Finished on the Simple Expression tab

    

26. Click Save on the completed Branch Rules tab

    

27. Click the + on the LinkedIn provider’s branch after the OAuth Logon Page

    

    Note

    If not still in the VPE: Go to Access -> Profiles / Policies -> Access Profiles (Per Session Policies). Click Edit on social-ap, a new browser tab will open*

28. Select OAuth Client from the Authentication tab and click Add Item

    

29. Enter the following in the OAuth Client input screen and click Save

    • Name: LinkedIn OAuth Client
    • Server: /Common/LinkedIn
    • Grant Type: Authorization Code
    • Authentication Redirect Request: /Common/LinkedInAuthRedirectRequest
    • Token Request: /Common/LinkedInTokenRequest
    • Refresh Token Request: None
    • Validate Token Request: /Common/LinkedInValidationScopesRequest
    • Redirection URI: https://%{session.server.network.name}/oauth/client/redirect
    • Scope: r_basicprofile *(Note underscore)*

    

30. Click + on the Successful branch after the LinkedIn OAuth Client

    

31. Select OAuth Scope from the Authentication tab, and click Add Item

    

32. Enter the following on the OAuth Scope input screen and click Save

    • Name: LinkedIn OAuth Scope
    • Server: /Common/LinkedIn
    • Scopes Request: /Common/LinkedInValidationScopesRequest
    • Click Add New Entry
    • Scope Name: r_basicprofile
    • Request: /Common/LinkedInScopeBasicProfile

    

33. Click the + on the Successful branch after the LinkedIn OAuth Scope object

    

34. Select Variable Assign from the Assignment tab, and click Add Item

    

35. Name it LinkedIn Variable Assign and click Add New Entry then change

    

36. Enter the following values and click Finished

    Left Side:

    • Type: Custom Variable
    • Security: Unsecure
    • Value: session.logon.last.username

    Right Side:

    • Type: Session Variable
    • Session Variable: session.oauth.scope.last.firstName

    

37. Review the LinkedIn Variable Assign object and click Save

    

38. Click Deny on the Fallback branch after the LinkedIn Variable Assign object, select Allow in the pop up window and click Save

    

39. Click Apply Access Policy in the top left and then close the tab

    

Test Configuration¶

1. Test by opening Chrome in the jump host and browsing to https://social.f5agility.com, select the provider and attempt logon.

   

   Note

   You are able to login and reach the app now, but SSO to the app has not been setup so you get an application error.

   Note

   You may also be prompted for additional security measures as you are logging in from a new location.

   Note

   You may need to start a Chrome New Incognito Window so no session data carries over.

2. You will be prompted to authorize your request. Click Allow.

   

Configure the Per Request Policy¶

1. Go to Access -> Profiles/Policies -> Per Request Policies and click Create

   

2. Enter prp-x-user-insertion the Name field and click Finished

   

3. Click Edit on the prp-x-user-insertion policy line

   

4. Click the + symbol between Start and Allow

   

5. Under the General Purpose tab select HTTP Headers and click Add Item

   

6. Under the HTTP Header Modify section, click Add New Entry to add the following two headers and then click Save

   • Header Operation: replace
   • Header Name: X-User
   • Header Value: %{session.logon.last.username}
   • Header Operation: replace
   • Header Name: X-Provider
   • Header Value: %{session.logon.last.oauthprovidertype}

   

   Note

   Replace instead of Insert has been selected for Header Operation to improve security. A malicious user might insert their own X-User header. As using Insert would simply add another header. Using Replace will add a header if it does not exist, or replace one if it does.

   You do not need to Apply Policy on per request policies. You may simply close the browser tab

   

Add the Per Request Policy to the Virtual Server¶

1. Go to Local Traffic -> Virtual Servers and click on social.f5agility.com-vs

   

2. Scroll to the Access Policy section of the Virtual Server and select prp-x-user-insertion from the Per-Request Policy drop down. Scroll to the bottom of the page and click Update

   

Test Configuration¶

1. Go to https://social.f5agility.com in your browser and logon using one of the social logon providers. This time you should see your name appear in the top right corner. You can also click “Headers” in the webapp and look at the headers presented to the client. You will see x-user present here with your name as the value. You’ll also see the x-provider header you inserted indicating where the data is coming from.