Configuring Custom Social Logins

¶ Fill in the Application Profile

Enter the Authing Console > Authentication > Enterprise, click the Create Connection button.

¶ Fill in the Identity Source Profile

Fill in some basic connection information, connect markers, display names, and you can upload an application logo.

Fill in the basic information of the external social login provider and you can find the relevant URL endpoints, including Authorization URL, Token URL, Scope Authorization Scope, from the documentation of the external OAuth 2.0 identity provider. Also fill in the Client ID and Client Secret of the external OAuth 2.0 social login identity source, which you can find at the external OAuth 2.0 social login identity source.

An authorization link template is a string template that allows you to Use ${authEndPoint}, ${tokenEndPoint}, ${scope}, ${clientId}, $ {clientSecret} macros.

Macros correspond to form items as follows:

Example:

If the authorization link template is completed:

${authEndPoint}?client_id=${clientId}&response_type=code&state=4634641&scope=${scope}&redirect_uri=https://core.authing.cn/connections/oauth2/5fa91b0f50315451dc86086d/callback

The following authorization URLs will be generated in the future:

https://login.microsoftonline.com/8f909eb1-99fe-4f75-b4e0-2f7ab37815c6/oauth2/v2.0/authorize?client_id=fc52a7ab-4172-4db3-9292-e51f85a1576e&response_type=code&state=4634641&scope=openid profile&redirect_uri=https://core.authing.cn/connections/oauth2/5fa91b0f50315451dc86086d/callback

¶ Upload custom code snippets

Finally, and most critically, you need to upload custom code snippets to complete the Code Change Token and Token Change User Information and Field Alignment features.

Authing has provided you with template code:

You can send network requests in a function using the request-promise (opens new window) library.

¶ codeToToken Function

The following is the template code for the codeToToken function, the first parameter code of the function is the authorization code, which you need to exchange for AccessToken from the Token endpoint of the external OAuth 2.0 social login identity provider.

async function codeToToken(code, connection) {
  const options = {
    method: "POST",
    uri: "External OAuth2.0 IdP token end point",
    form: {
      client_id: "External OAuth2.0 IdP client ID",
      client_secret: "External OAuth2.0 IdP client secret",
      grant_type: "authorization_code",
      redirect_uri:
        "https://core.authing.cn/connections/oauth2/{Connection ID}/callback",
      code
    },
    json: true
  };
  const resp = await request(options);

  return resp.access_token;
}

¶ tokenToUserInfo Function

The following is the template code for the tokenToUserInfo function, the first parameter of the function accessToken is the return value of the previous function codeToToken function (resp.access_token in this case), and you need to exchange accessToken for user information from the user information endpoint of the external OAuth 2.0 socialized login identity provider. The return value is an object whose content must be a user information field that conforms to the Authing data format and must contain the userIdInIdp field, which is the user's unique identifier in the external identity provider, that is, the user ID.

async function tokenToUserInfo(accessToken, connection) {
  const options = {
    method: "POST",
    uri: "External OAuth2.0 IdP user info end point",
    form: {
      access_token: accessToken
    },
    json: true
  };
  const resp = await request(options);

  const profile = {
    // Must contain userIdInIdp fields
    userIdInIdp: resp.sub,
    name: resp.name,
    familyName: resp.family_name,
    givenName: resp.given_name,
    photo: resp.picture
  };
  return profile;
}

Align user information to a field where the tokenToUserInfo function returns content that must be an object, and the key in this object must exist in the field name in the following table, Authorizing User Information Field Meaning Table:

Finally, click Save. Now that the settings for customizing the external social login are complete, let's experience the Use customized social login connection to authenticate.