微信第三方授权登录之oauth开发

2024-03-01 12:58

本文主要是介绍微信第三方授权登录之oauth开发,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

背景:

首先copy下别人讲解的oauth2.0验证授权的一些背景知识:

 

1) 传统的注册登陆方式:


如果你是一个新用户,则点击新用户注册按钮,进入由简书提供的注册页面,进行用户名密码验证和设置

然后再回到简书提供的登陆页面,输入刚注册的用户名和密码进行登陆

缺点(站在用户的角度):

  • 除非我很想使用该app,否则根本不想花这么多时间进行注册,太麻烦了。

  • 如果使用app很多,到处注册,密码要么一样,要么多到你记不住

  • 每次登陆还要手动输入用户名以及密码,也是很麻烦的事情

优点(站在app提供者的角度):

  • 对app提供者来说,新客户注册对其吸引投资,增加市值,加强影响力是有非常大的帮助。

那么有什么好的方法,能够避免掉用户注册登陆的不便之处呢?答案就是: 利用各个社交app(例如微信)现有的注册账号进行第三方(例如简书)应用的验证授权登陆,这就是传说中的oauth2.0授权登陆。

之所以使用社交软件账号是因为用户实在是够多啊!作为国人,大家基本上都有微信,qq等账号。这样就只要点击一下简书登陆页面中的社交账号直接登陆中某个图标就直接进入由社交app提供的授权页面

2) oauth2.0授权登陆:

上图显示了简书使用微信/qq/豆瓣/新浪微博进行oauth2.0授权登陆的界面,该界面并不是由简书提供的,而是由对应的各个社交app提供的

上面四个界面中,微信登陆只要按确认登陆就能登陆简书app(不要注册,不要填写用户名+密码,只要点击确认登陆就能登陆简书。甚至可以通过静默授权,连这个页面都不需要显示就直接进入简书)。

其他的三个界面还是需要输入对应社交app的用户名+密码。这是因为我只打开了微信app,qq没开,至于豆瓣以及新浪微博,我还没有账号。

3) 以简书为例子,来简单说明oauth2.0授权登陆流程:

什么是oatuh2.0协议:

  • OAuth2.0(开放授权)是一个开放标准。
    没啥好解释的,就是一个标准

  • 允许第三方网站用户授权的前提下访问在用户服务商那里存储的各种信息。
    蕴含很多信息哦!
    这句话提到了三个角色:第三方网站/用户/服务商
    这句话是站在服务商的角度进行描述的。
    服务商:以微信为例子,那么服务商就是微信[服务器]或腾讯
    用户 : 就是的相关信息(例如用户名/密码/性别/ 省份等等等等)都是存放在服务商的服务器中。注意:你不是第三方(例如简书)的用户,而是微信的用户(因为你是注册在微信中,而不是简书中)
    第三方网站 : 这里指的就是简书[服务器]

  • 而这种授权无需将用户提供用户名和密码提供给该第三方网站
    这句话的意思很明显,就是简书服务器是没法拿到微信服务器中的用户名和密码的,但是的确能够让登陆简书服务器

  • 既然第三方(简书)无法拿到你的用户名和密码,那肯定是由服务商(微信)来进行验证,那么第三方肯定要和服务商有一种机制来进行辨识:
    在认证过程之前,第三方(简书)需要先向服务商(微信)申请第三方(简书)服务的唯一标识
    因此第三方(简书)填写本公司相关信息,提供本公司账号,域名等信息,并且花三百块钱给服务商(腾讯)进行审核。服务商腾讯收到钱,并且审核通过后,会给第三方(简书)两个编号:AppID和appSecret(及其重要,不能泄露)。通过这两个编号,就能确认唯一性了。当然过程是很复杂的。

  • 第三方[服务器]服务商[服务器]之间的通信:
    既然第三方(简书)用通过服务商(微信)来验证用户(你)身份的合法性,那么肯定涉及到:一旦服务商(微信)确认用户(你)的合法身份后,如何将信息传递给第三方(简书)
    很简单,通过第三方(简书服务器)提供的回调URL,服务商(微信服务器)将相关数据以参数形式写入到第三方(简书服务器)提供的回调URL,第三方(简书服务器)解析服务商(微信服务器)发过来的信息抽取出来就OK了!
    那在微信公众号的申请中,有要求第三方(简书)提供回调地址



oauth2.0授权流程:

其中:
2--7步骤是通过简书调用:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
这个API进行的,具体参数请参见文档说明

8-9步骤是通过简书调用:
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
这个API进行的,具体参数请参见文档说明

步骤10以后,是通过accesstoken以及openid等从微信获取相关信息了

代码实现:

首先安装必要库:

npm install wechat-oauth --save

通过微信授权获取openid和accesstoken示例代码:

//1、引入wechat-oauth包
var OAuth = require('wechat-oauth');//2、生成一个OAuth的实例,appId和appSecert作为构造参数
var oauthApi = new OAuth(你的appId, 你的appSecert);//3、构造一个路由,用于获取微信写入到你的回调url中的code数据
//这个路由就是你注册在微信开发中的回调url!!!!
//此时的你充当的是第三方网站角色,相当于简书服务器
app.get('/callback', function (req, res) {  console.log('----weixin callback -----')var code = req.query.code;console.log("code =" + code);//通过code获取accesstokenoauthApi.getAccessToken(code, function (err, result){//如果函数调用成功,会在result中得到access_tokenvar accessToken = result.data.access_token;//以及openid;var openid = result.data.openid; console.log('openid='+ openid);//然后通过openid获取用户信息   oauthApi.getUser(openid, function (err, result1) {console.log('use weixin api get user: ' + err)console.log(result)var oauth_user = result1;//打印出用户信息console.log("userinfo" + JSON.stringify(oauth_user, null, '      '));//授权成功获取信息后,重定向到你要去的页面//这里随便,所以直接重定向到首页了,你可以换成其他任何页面     res.redirect('/');});console.log("blf write" + JSON.stringify(result.data, null, '   '));});});

请求代码:

 //url就是3、中定义的路由一致,用来接收微信发过来的code
//关键点: callbackURL必须要和3、中定义的路由一致!!!
//       且callbackURL就是你在微信中提供的回调url!!!
//就是上图显示的url!!!var callbackURL = 'http://你的域名/callback';//oauth2是你定义的路由,当你点击微信登陆这个按钮时,就调用oauth2这个路由,向腾讯请求oauth2授权验证//腾讯验证通过,会将code写入到3、这个回调url中//然后通过3、路由,获取code, 换取accesstoken以及openid//再通过openid获取userInfo,漂亮,完成整个操作app.get('/oauth2', function(req, res) {var url = oauthApi.getAuthorizeURL(callbackURL,'','snsapi_base');console.log(url);//重定向的回调地址,获取code,通过code换取openid和accesstoken ,通过openid获取用户信息//所有一起如此简单       res.redirect(url); })

用到了wechat-oauth库中的三个api:

oauthApi.getAuthorizeURL

相当于2--7步骤是通过调用:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
还是贴一下该函数的源码吧,这样就清晰了

/*** 获取授权页面的URL地址* @param {String} redirect 授权后要跳转的地址* @param {String} state 开发者可提供的数据* @param {String} scope 作用范围,值为snsapi_userinfo和snsapi_base,前者用于弹出,后者用于跳转*/
OAuth.prototype.getAuthorizeURL = function (redirect, state, scope) {var url = 'https://open.weixin.qq.com/connect/oauth2/authorize';var info = {appid: this.appid,redirect_uri: redirect,response_type: 'code',scope: scope || 'snsapi_base',state: state || ''};//合成授权请求url//然后第三方网站(你)重定向到这个url中去//其结果就是调用callback路由//于是就运行你在callback中的代码了//流程衔接起来了return url + '?' + querystring.stringify(info) + '#wechat_redirect';
};

oauthApi.getAccessToken

相当于8-9步骤是通过调用:https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

OAuth.prototype.getAccessToken = function (code, callback) {var url = 'https://api.weixin.qq.com/sns/oauth2/access_token';var info = {appid: this.appid,secret: this.appsecret,code: code,grant_type: 'authorization_code'};var args = {data: info,dataType: 'json'};//请求url,通过code换取accesstoken,openid等等this.request(url, args, wrapper(processToken(this, callback)));
};

oauthApi.getUser

相当于步骤10以后,是通过accesstoken以及openid等从微信获取相关信息了.

通过上面的描述,大家可能都已经清楚第三方授权登录的意思了。

二维码实现:

其实上面已经说的很清楚了,在进行二维码实现登录的时候,只是将上述的请求代码:也就是第二块代码以二维码的方式实现而已。

 html页面中操作:1,引入html页面:<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>2,html下面加入这段js对象    <script type="text/javascript">var obj = new WxLogin({id:"login_container", // 需要显示的容器idappid: "",  // 公众号appid wx*******scope: "snsapi_login,snsapi_userinfo",  // 网页默认即可redirect_uri: "", // 授权成功后回调的urlstate: "", // 可设置为简单的随机数加session用来校验style: "black", // 提供"black"、"white"可选。二维码的样式href: "" // 外部css文件url,需要https});</script>3,需要展示二维码的地方加入如下标签(注意id和js对象的id要一致)<div class="login_fast" id="login_container">

用户扫码点击确认后,会进入到对应的回调函数的地址。然后在那个地方按照上诉代码实现,获取token拿取数据即可。才开始我没想到用wechat-oauth这个模块,都是自己一个简单的实现信息获取。到后来,用了oauth发现,还是别人封装的好用啊,在此谢谢朴灵那些老前辈们。下面是我随便写的实现,比较low鸡,随便看看。

.get('/getAcceccToken',(req,res)=>{let code = req.query.code;let state = req.query.state;if(!!state) console.log('This set state is :'+state)if(!!code) {new Promise((resolve,reject) =>{let secret = '947a16a2f016c9e4449196e8a';let appId = 'wx9801d8964965481545154052';request('https://api.weixin.qq.com/sns/oauth2/access_token?appid='+appId+'&secret='+secret+'&code='+code+'&grant_type=authorization_code',(error,res,body) =>{if (!error && res.statusCode == 200) {console.log(body) // Show the HTML for the baidu homepage.resolve(body)}else{reject('error')}})}).then(data =>{console.log(typeof(data))data = JSON.parse(data);let access_token = data.access_token,openid = data.openid;return new Promise((resolve,reject) =>{request('https://api.weixin.qq.com/sns/userinfo?access_token='+access_token+'&openid='+openid,(error,res,body) =>{if (!error && res.statusCode == 200) {console.log(body) // Show the HTML for the baidu homepage.resolve(body)}else{reject('error')}})})}).then(data =>{console.log(data)data = JSON.parse(data)res.json(data)}).catch(err => res.send(err))}})

以上的都是我结合别人的博客和自己的实践总结出来的。下面把借鉴的博客都贴出来共享吧。毕竟别的博主都写的这么棒。

微信第三方二维码扫描登录

OAuth2.0实战之微信授权篇

wechat-oauth

这篇关于微信第三方授权登录之oauth开发的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/762517

相关文章

kali linux 无法登录root的问题及解决方法

《kalilinux无法登录root的问题及解决方法》:本文主要介绍kalilinux无法登录root的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,... 目录kali linux 无法登录root1、问题描述1.1、本地登录root1.2、ssh远程登录root2、

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作(一)微信支付商户平台配置(二)Spring Boot项目搭建(三)配置文件

SpringSecurity6.0 如何通过JWTtoken进行认证授权

《SpringSecurity6.0如何通过JWTtoken进行认证授权》:本文主要介绍SpringSecurity6.0通过JWTtoken进行认证授权的过程,本文给大家介绍的非常详细,感兴趣... 目录项目依赖认证UserDetailService生成JWT token权限控制小结之前写过一个文章,从S

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版:拆分成模块让模块更强大:使用 __init__.py你一定会遇到的问题模www.

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis