OAuth2(open Auth)开放授权协议

授权码模式流程:

1、浏览器(客户端)点击一个比如使用微信登陆按钮

2、会跳到认证服务器页面,让用户选择是否授权

3、如果用户点击授权,那么会跳转到开始在链接上填写的回调地址 (redirect_uri),同时会产生一个授权码code

4、客户端又拿这个code去认证服务器请求access_token

5、有了access_token就可以去调用授权的接口,access_token有效期比较短,当access_token过期后可以refresh_token刷新access_token

微信登陆流程:

为了便于调试,可以在微信开发平台的回调上写本地服务比如egg启动的地址localhost:7001,只要和本地设置的回调地址同域名就可以生成二维码

1、引用http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

2、 实例化以下对象可以生成一个二维码

 var obj = new WxLogin({
self_redirect:false, //是在iframe里跳转还是顶层窗口跳转
id:"login_container", //DOM容器放置二维码的区域
appid: "", //在应用开发平台申请
scope: "snsapi_login", //如果是网页应用填写这个
redirect_uri: "localhost:7001/reqAccessToken",//回调地址
state: "xxx",//附带传递的数据
style: "", //二维码行内样式
href: "" //外链样式
});

3、扫描这个二维码,会弹出授权页,点击授权会重定向到刚才的回调地址redirect_uri,并会自动附上code值,如果开始填了state值,这个时候也会返回刚才的state,可以用这个state的自定义值进行区分做登陆还是绑定

redirect_uri?code=CODE&state=STATE  //点击授权的返回
redirect_uri?state=STATE //不授权的返回

4、然后在比如nodejs服务路由里拦截刚才的redirect_uri地址,然后获取这个code值,去调用获取access_token的接口

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
//appid和secret //开放平台提供的值,填上即可
//CODE 即上一步返回的code值

5、这个获取access_token的接口返回的数据

{
"access_token":"ACCESS_TOKEN", //调用进一步接口令牌
"expires_in":7200, //这个接口的过期时间
"refresh_token":"REFRESH_TOKEN",//刷新上面令牌的参数
"openid":"OPENID", //用户唯一标识
"scope":"SCOPE"
}

6、用openid和access_token获取用户基本信息

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
//上一步返回的openid和access_token
{
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
"privilege":[
"PRIVILEGE1",
"PRIVILEGE2"
],
"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL" //用这个unionid进行绑定其他信息
}

7、拿unionid和用户填写的其他信息进行关联绑定,比如手机号,当用户下次绑定的时候,发现数据库里有了该手机号,则直接给用户跳转到扫码界面进行扫码登陆,如果当用户下次是直接扫码登陆,但是数据库里没有这个unionid,则给用户跳转到绑定界面让用户进行绑定

调试或多环境共用一个开发平台回调设置:

如果微信开发平台只注册了一个网站应用,只能填写一个回调地址,为了不影响本地开发调试,可以在服务端做一个转发:

比如回调地址是111.111.111.111:7001则给开发环境和生产环境加一个标识,当回调请求111.111.111.111:7001/env/dev/reqAccessToken 则重定向到 localhost:7001/reqAccessToken,如果111.111.111.111:7001/production/reqAccessToken则重定向到111.111.111.111:7001/reqAccessToken即可,本地生成二维码的redirect_uri就写111.111.111.111:7001/env/${env}即可,然后服务端路由拦截/env/:env,根据env做重定向判断。

//生成二维码的实例化对象redirect_uri填写
//跟微信开发平台填写的回调地址同域名
var redirectPrefix = "https://www.xxx.com";
var CURENV = '<%=env%>';
new WxLogin({
self_redirect: false,
id: "J_wechatCodeBind",
appid: "xxx",
scope: "snsapi_login",
redirect_uri: encodeURI(`${redirectPrefix}/env/${CURENV}`),
state:"",
style: "white",
href: ""
}); //路由拦截上面的回调GET请求
async redirectUrl() {
const ctx = this.ctx;
const curEnv = ctx.params.curEnv;
const code = ctx.query.code;
const state = ctx.query.state;
if (curEnv == 'dev') {
ctx.redirect(`http://localhost:7001/xxx/xxx/requestAccessToken?code=${code}&state=${state}`);
} else if (curEnv == 'test') {
ctx.redirect(`http://192.168.0.xxx:7006/xxx/xxx/requestAccessToken?code=${code}&state=${state}`);
} else {
ctx.redirect(`https://www.xxx.com/xxx/xxx/requestAccessToken?code=${code}&state=${state}`);
}
}

oAuth2授权协议 & 微信授权登陆和绑定 & 多环境共用一个微信开发平台回调设置的更多相关文章

  1. OAuth2.0 用户验证授权标准 理解

    OAuth2.0是一套标准. 一.问题 这个标准解决了这样的一个问题. 允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用.  ...

  2. 深入理解OAuth2.0协议

    1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题.豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒店 ...

  3. 帮你深入理解OAuth2.0协议

    1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题.豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒店 ...

  4. (转)帮你深入理解OAuth2.0协议

    1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题.豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒店 ...

  5. 问题:OAuth2.0;结果:帮你深入理解OAuth2.0协议

    1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题. 豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒 ...

  6. Asp.netCore 3.0 Web 实现Oauth2.0微信授权登陆的测试

    1:Oauth2.0授权的流程截图 官方流程如下: 1 第一步:用户同意授权,获取code 2 第二步:通过code换取网页授权access_token 3 第三步:刷新access_token(如果 ...

  7. PHP实现微信网页登陆授权开发

    这篇文章主要介绍了关于PHP实现微信网页登陆授权开发,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 更多PHP相关知识请关注我的专栏PHP​zhuanlan.zhihu.com 微信开 ...

  8. 微信公众平台开发——微信授权登录(OAuth2.0)

    1.OAuth2.0简介 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户 ...

  9. OAuth2.0实战之微信授权篇

    微信开发三大坑: 微信OAuth2.0授权 微信jssdk签名 微信支付签名 本篇先搞定微信OAuth2.0授权吧! 以简书的登陆页面为例,来了解一下oauth2.0验证授权的一些背景知识: 1) 传 ...

随机推荐

  1. GMM简单解释

    1.GMM(guassian mixture model) 混合高斯模型,顾名思义,就是用多个带有权重的高斯密度函数来描述数据的分布情况.理论上来说,高斯分量越多,极值点越多,混合高斯密度函数可以逼近 ...

  2. svn 默认忽略静态库 .a文件解决办法

    我也是在向SVN服务器上传文件时,遇到了这个问题,文件上传后,再下载后发现所有的.a文件全部丢失,后来才知道是上传文件的时候.a文件根本就没传上去,查找原因才知道上传的时候.a文件被过滤掉了,后来找到 ...

  3. Instagram的持续部署技术

    Instagram最近发表了一篇关于他们的持续部署(CD)管道的文章,持续部署管道可以让他们更快的将代码推送到生产环境,并且轻松地识别糟糕的提交和始终保持发布可用.在一段时间内以迭代的方式放在一起,其 ...

  4. [moka同学笔记]yii2 activeForm 表单样式的修改(二)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABAEAAANXCAIAAADLkdErAAAgAElEQVR4nOzdfWwc953nef6zwO5Zg8

  5. VS代码片段(snippet)创作工具——Snippet Editor(转)

    原文:http://blog.csdn.net/oyi319/article/details/5605502 从Visual Studio 2005开始,IDE支持代码片段.代码片段以代码缩写和TAB ...

  6. 2016年11月21日 星期一 --出埃及记 Exodus 20:12

    2016年11月21日 星期一 --出埃及记 Exodus 20:12 "Honor your father and your mother, so that you may live lo ...

  7. hdu 2881 Jack&#39;s struggle(DP)

    对于所有的任务所在的地点按照时间排序,可以将其看成是一道非常简单的“天上掉馅饼”的题的二维版本. 将这些任务看成从天而降的馅饼,统计有哪些之前馅饼掉落的位置可以在两者时间差内到达该点的点,取其最大值. ...

  8. SQLServer数据库分页

    以  项目表 PM_Project  为例. PM_Project 全部内容如下(共6条数据): 一.Top – Not In - Top 方式分页 直接的,原始的,不采用函数,纯手动挡. 分步探索过 ...

  9. shell关于文件操作

    一.如何将一个十进制的整数用2进制表示出来? echo "obase=2;50" | bc 二.Linux下经常需要删除空白行,grep,sed,awk,tr等工具均可实现 gre ...

  10. Python3 tkinter基础 Entry validate validatecommand 失去焦点时,检查输入内容

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...