微软、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}}
}