H5页面微信、QQ和微博的快捷登录

1、QQ的快捷登录:
https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=12345678&redirect_uri=http://www.pipihou.com/test/newShare.html&scope=get_user_info
H5页面微信、QQ和微博的快捷登录_第1张图片
a、请求成功后,会跳转到填写的回调地址,并在结尾处拼接上:#access_token=FE04************************CCE2&expires_in=7776000&state=test
access_token为获取的用户的access_token,expires_in为access_token的过期时间;
b、获取到用户的access_token后利用GET方式请求:
移动应用:https://graph.qq.com/oauth2.0/me
WAP网站:https://graph.z.qq.com/moc2/me
这两个接口,接口请求成功后会返回用户的openid:
H5页面微信、QQ和微博的快捷登录_第2张图片
c、获取到了用户的openid、access_token,以及开发者自己应用的appid,就可以请求qq的api获取用户的信息,以及进行一些其他操作;
提示:回调地址需要配置在腾讯开放平台上面(具体配置:https://wiki.open.qq.com/wiki/【QQ登录】回调地址常见问题及修改方法);
参考地址:https://wiki.open.qq.com/wiki/mobile/%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C

2、微信的快捷登录:
var redirectURL = ‘http://www.pipihou.com/test/newShare.html
‘https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd12345678945612&redirect_uri=’+encodeURIComponent(redirectURL)+’&response_type=code&scope=snsapi_base&state=123#wechat_redirect’;
H5页面微信、QQ和微博的快捷登录_第3张图片
回调地址一定要urlEncode处理,并且配置到公众号的管理后台!!(配置路径为:微信公众平台–开发–基本配置–公众号开发信息–IP白名单);
a、请求成功后,会跳转到填写的回调地址,并在结尾处拼接上:?code=CODE&state=STATE。
code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。
b、通过code换取网页授权access_token:通过get方式请求接口https://api.weixin.qq.com/sns/oauth2/access_token,具体的参数为:
H5页面微信、QQ和微博的快捷登录_第4张图片
请求成功后返回参数为:{ "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE" }
H5页面微信、QQ和微博的快捷登录_第5张图片
c、拉取用户信息(需scope为 snsapi_userinfo):通过GET方式请求(请使用https协议) https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN 参数说明:

H5页面微信、QQ和微博的快捷登录_第6张图片
请求成功后会返回用户的基本信息:{ "openid":" OPENID", " nickname": NICKNAME, "sex":"1", "province":"PROVINCE" "city":"CITY", "country":"COUNTRY", "headimgurl": "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46", "privilege":[ "PRIVILEGE1" "PRIVILEGE2" ], "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" }
H5页面微信、QQ和微博的快捷登录_第7张图片

参考地址为:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

3、微博的快捷登录:微博开放的各个接口
H5页面微信、QQ和微博的快捷登录_第8张图片
a、跳转这个地址:
https://api.weibo.com/oauth2/authorize?client_id=YOUR_CLIENT_ID&response_type=code&redirect_uri=YOUR_REGISTERED_REDIRECT_URI 当用户用户同意授权,页面跳转至 YOUR_REGISTERED_REDIRECT_URI/?code=CODE,就可以获取到用户的code;
回调地址一定要配置在微博的管理后台:H5页面微信、QQ和微博的快捷登录_第9张图片
b、利用获取到的code去换用户的access_token:
https://api.weibo.com/oauth2/access_token?client_id=YOUR_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&grant_type=authorization_code&redirect_uri=YOUR_REGISTERED_REDIRECT_URI&code=CODE
这个接口会返回{ "access_token": "SlAV32hkKG", "remind_in": 3600, "expires_in": 3600 },这样就获取到了用户的access_token;
c、利用access_token调用微博的api获得用户的个人信息和进行操作:
H5页面微信、QQ和微博的快捷登录_第10张图片
参考文档:https://open.weibo.com/wiki/Connect/login

你可能感兴趣的:(js,H5)