How To: Add a Sign In Button for a specific Account Provider to your Application

Summary

In this topic you will learn the neccesary steps to allow users to sign in to your application without the need to choose between the available Account Providers.
This can be feasible if you want to add e.g. a Facebook, Microsoft Account, Twitter Sign In button to your application.

Contents

  • Objectives
  • Using Windows 8 en Windows Desktop SDK
  • Angular JS
  • Construct the url your self
  • OAuth flows

Objectives

  • Allow users to sign in to your application without the need to choose between the available Account Providers.

Summary

  • Using Windows 8 en Windows Desktop SDK
  • Angular JS
  • Construct the url your self
  • OAuth flows

Using Windows 8 en Windows Desktop SDK

In this section you will learn the neccesary steps to allow users to sign in to your application without the need to choose between the available Account Providers using the Windows 8 en Windows Desktop SDK.

  • Navigate to the Account Providers Admin Page and click on the Account Provider you want to add a button for.

  • Scroll down to the Direct Link and copy the identifier displayed after providerId=.

  • Use the overload of the TryAuthenticateAsync method and specify the account provide identifier

    
    // Your ClientId
    var clientId = "";
    // Your base URL
    var baseUrl = new Uri("https://www.theidentityhub.com/{tenant}");
    // Initialize
    var identityService = new IdentityService(clientId, baseUrl);
    
    // Authenticate
    if(await identityService.TryAuthenticateAsync([Account Provider Identifier]))
    {
        // Get profile info.
        var profile = await identityService.GetProfileAsync();
    
        // Get friends info.
        var friends = await identityService.GetFriendsAsync();
    }
    


Using Angular JS (Coming Soon)

In this section you will learn the neccesary steps to allow users to sign in to your application without the need to choose between the available Account Providers using the Angular JS SDK.


Construct the url your self

In this section you will learn the neccesary steps to allow users to sign in to your application without the need to choose between the available Account Providers by creating the url your self.

  • Navigate to the Account Providers Admin Page and click on the Account Provider you want to add a button for.

  • Scroll down to the Direct Link and copy the url.

  • Add a replyTo querystring parameter to the url containing the url encoded url of your site.

    
    https://www.theidentityhub.com/{tenant}/authenticate?providerId=[Account Provider Identifier]&replyTo=https%3A%2F%2Fwww.mywebapp.me
    


OAuth flows

In this section you will learn the neccesary steps to allow users to sign in to your application without the need to choose between the available Account Providers by modifing the OAuth flow request uri.

  • Navigate to the Account Providers Admin Page and click on the Account Provider you want to add a button for.

  • Scroll down to the Direct Link and copy the identifier displayed after providerId=.

  • Add a providerId querystring parameter to the url you constructed to initiate an OAuth flow.

    GET /{tenant}/oauth2/v1/auth/?
        response_type=token
        &client_id=[YOUR_CLIENT_ID]
        &redirect_uri=https://[YOUR_APP_REDIRECT_URI]/
        &scope=[SCOPES]
        &state=[STATE]
        &providerId=[ACCOUNT_PROVIDER_IDENTIFIER]]