Authing DocsDocuments
Concept
Guides
Development Integration
Application integration
Concept
Guides
Development Integration
Application integration
Old Version

Configuring Custom Social Logins

1

Creating a Custom Social Login Connection

2

Creating an Application in Authing

3

Test Connection

4

Start development of access

Creating a Custom Social Login Connection

¶ 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.

Although scope is optional in the form here, some external OAuth 2.0 social login identity sources may require scope parameters to be passed, and the appropriate configuration is recommended here.

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:

MacrosItems
${authEndPoint}Authorization URL
${tokenEndPoint}Token URL
${scope}Scope
${clientId}Client ID
${clientSecret}Client Secret

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:

FieldTypeDescription
usernamestringusername
emailstringemail
emailVerifiedbooleanemail verification
phonestringphone
phoneVerifiedbooleanphone verification
birthdatestringbirthdate
familyNamestringfamilyName
genderstringgender
localestringlocale
middleNamestringmiddleName
givenNamestringgiven name
nicknamestringnickname
photostringphoto
profilestringprofile
preferredUsernamestringFavorite User Name
updatedAtDateupdated date
websitestringwebsite
zoneinfostringzone

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.

Back to list

User identity management

Integrated third-party login
Mobile phone number flash check (opens new window)
Universal login form component
Custom authentication process

Enterprise internal management

Single Sign On
Multi-factor Authentication
Authority Management

Developers

Development Document
Framework Integration
Blog (opens new window)
GitHub (opens new window)
Community User Center (opens new window)

Company

400 888 2106
sales@authing.cn
16 / F, Block B, NORTH STAR CENTURY CENTER, Beijing(Total)
room 406, 4th floor, zone B, building 1, No. 200, Tianfu Fifth Street, Chengdu(branch)

Beijing ICP No.19051205-1

© Beijing Steamory Technology Co.