微软、Google、Twitter、Facebook登录

微软、Google、Twitter、Facebook登录

1.背景

用户名密码方式的登录与注册繁琐，耗时长，用户体验差。

2.微软登录

(1）官方文档地址

https://learn.microsoft.com/zh-cn/graph/auth/

（2）时序图

a、步骤10

服务器通过app获取到的授权码，请求Microsoft Graph获取令牌

POST /{tenant}/oauth2/v2.0/token

Host: https://login.microsoftonline.com

Content-Type: application/x-www-form-urlencoded

• 参数说明
  
• 响应说明
  
• 响应示例

{
    "token_type": "Bearer",
    "scope": "user.read%20Fmail.read",
    "expires_in": 3600,
    "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik5HVEZ2ZEstZnl0aEV1Q...",
    "refresh_token": "AwABAAAAvPM1KaPlrEqdFSBzjqfTGAMxZGUTdM0t4B4..."
}

b、步骤12

通过授权码获取令牌信息

GET https://graph.microsoft.com/v1.0/me

Host: graph.microsoft.com

• 请求头部参数
  
• 响应示例

{
    "@odata.context":"https://graph.microsoft.com/v1.0/$metadata#users/$entity",
    "id":"12345678-73a6-4952-a53a-e9916737ff7f",
    "businessPhones":[
        "+1 555555555"
    ],
    "displayName":"Chris Green",
    "givenName":"Chris",
    "jobTitle":"Software Engineer",
    "mail":null,
    "mobilePhone":"+1 5555555555",
    "officeLocation":"Seattle Office",
    "preferredLanguage":null,
    "surname":"Green",
    "userPrincipalName":"ChrisG@contoso.onmicrosoft.com"
}

3、谷歌登录

（1）官方文档地址

https://developers.google.com/identity/protocols/oauth2/native-app

（2）时序图

（3）步骤说明

步骤7

通过授权码获取访问令牌、id令牌、刷新令牌

请求方式

POST https://oauth2.googleapis.com/token

Content-Type: application/x-www-form-urlencoded

• 请求参数
  
• 响应参数
  
• 响应示例

{
  "access_token": "1/fFAGRNJru1FTz70BzhT3Zg",
  "expires_in": 3920,
  "token_type": "Bearer",
  "id_token":"",
  "scope": "https://www.googleapis.com/auth/drive.metadata.readonly",
  "refresh_token": "1//xEoDL4iW3cxlI7yDbSRFYNG01kVKM2C-259HOF2aQbI"
}

• id_token解析示例

{
  "iss": "https://accounts.google.com",
  "azp": "1234987819200.apps.googleusercontent.com",
  "aud": "1234987819200.apps.googleusercontent.com",
  "sub": "10769150350006150715113082367",
  "at_hash": "HK6E_P6Dh8Y93mRNtsDB1Q",
  "hd": "example.com",
  "email": "jsmith@example.com",
  "email_verified": "true",
  "iat": 1353601026,
  "exp": 1353604926,
  "nonce": "0394852-3190485-2490358"
}

5、Facebook登录

（1）官方文档

https://developers.facebook.com/docs/graph-api/overview

https://developers.facebook.com/docs/facebook-login/guides/%20access-tokens/debugging

（2）时序图

（3）步骤说明

步骤5

通过app获取到的access token去请求Facebook服务器，验证token的正确性

• 请求方式
  GET https://graph.facebook.com/debug_token?access_token={client_id}%7C{appsecret}&input_token={app传递过来的access token}

• 参数说明
  

• 响应结果示例

{
    "data": {
        "app_id": "{app-id}",
        "type": "USER",
        "application": "{app-name}",
        "data_access_expires_at": 1576687825,
        "expires_at": 1570820400,
        "is_valid": true,
        "scopes": [
            "pages_show_list",
            "public_profile"
        ],
        "granular_scopes": [
            {
                "scope": "pages_show_list",
                "target_ids": [
                    "{page-1-app-can-access-id}",
                    "{page-2-app-can-access-id}"
                ]
            }
        ],
        "user_id": "10215241773831025"
    }
}

需要关注的参数为is_valid和user_id即可

步骤6

获取用户相关的信息，如果app那边获取的用户信息有邮箱，则这一步可以忽略

• 请求方式
  GET https://graph.facebook.com/USER-ID?fields=id,name,email,picture&access_token=ACCESS-TOKEN

• 请求参数
  

• 响应结果

{
  "id": "USER-ID",
  "name": "EXAMPLE NAME",
  "email": "EXAMPLE@EMAIL.COM",
  "picture": {
    "data": {
      "height": 50,
      "is_silhouette": false,
      "url": "URL-FOR-USER-PROFILE-PICTURE",
      "width": 50
    }
  }
}