微软、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 -
请求参数
文章来源:https://www.toymoban.com/news/detail-766879.html -
响应结果文章来源地址https://www.toymoban.com/news/detail-766879.html
{
"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
}
}
}
到了这里,关于微软、Google、Twitter、Facebook登录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!