不经过悉心栽培,花儿开不出鲜艳的花朵;不经过时间的历练,幼苗长不成参天大树。

Vue单页应用结合后台做第三方登录[微信扫一扫登录授权登录](一)

web 建伟 1647℃ 0评论

前言

在之前的mvc开发中,相信大家都也能很熟练的做出结合微信登录qq登录等的第三方登录,今天我这主要说一下前后端分离模式中的第三方登录流程

在说微信登录之前我首先跟大家说一下微信的access_token 在微信中access_token是有俩种的,大家一定要分别仔细,一个是网页授权获取到的access_token,这个token是一次性的,只能获取到一个微信用户信息,是与微信用户一对一的关系,而另外一个基础access_token是专门请求获取token接口拿到的,这个有效期是7200s,大家一定要区分开这俩个token.在今天所说的微信登录中

我首先用一幅图说明一下大致流程(扫一扫登录和微信内授权登录流程大致一样)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

网站应用微信登录开发指南

微信文档:

https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=f4f77621bb28701905b55092c32eab02b718d258&lang=zh_CN

扫一扫登录,大致流程我图中已经给出来了,其实这只是一个流程,并不是最简单的,只要你明白了,你也可以有你自己的流程

前端跳转到微信扫一扫界面

第三方使用网站应用授权登录前请注意已获取相应网页授权作用域(scope=snsapi_login),则可以通过在PC端打开以下链接:
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
若提示“该链接无法访问”,请检查参数是否填写错误,如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。

在回调的url中,我们可以拿到code,然后把这个code给前端,让前端拿着code去请求我们登录接口,然后成功直接返回登录信息前端直接保存即可

 

转载请注明:Li Jianwei's Blog » Vue单页应用结合后台做第三方登录[微信扫一扫登录授权登录](一)

喜欢 (2)or分享 (0)
web技术交流群
22765697