接入微信OAuth2.0登录流程

1. 到微信开放平台 ,先注册一个开发者帐号,再申请一个网页应用,填入公司网站信息,主要包括网站域名和回调地址,如 网站域名:www.baidu.com回调地址:http://www.baidu.com/login.htm

2. 审核通过后,可以访问这个链接获取到微信登录的二维码:

https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect

这是一号店的微信登录地址,appid 和 appsecret 还有redirect_uri替换成你自己的,state参数是做校验的,可以随意写。
如果不想跳转到新的页面,可以使用第二种模式,内嵌js执行

  1. 引入js
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition>/js/jquery.min.js"></script>
<script  src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
  1. html 部分
<div id="wx_login_container"></div>
  1. js实例
<script>

$(document).ready(function()
{
   var obj = new WxLogin({
       self_redirect: true,
       id:"wx_login_container", 
       appid: "appid", 
       scope: "snsapi_login", 
       redirect_uri: "回调地址",
       state: "",
       style: "black",
       href: "", //https://某个域名下的css文件
    });
});
</script>

注意其中href里指向的css文件必须放在https协议下才能引用的到,大体上不需改变默认样式,浪费脑细胞,可以针对div 来改变二维码的大小和位置,里边是内嵌一个iframe

3. 用户用微信客户端扫第二部的登录页面登录后,页面会跳转到回调地址并附加一个code参数,然后通过code参数可以通下面接口获取到access_token和open_id

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

appid scret替换成你自己的,code替换替换成微信给你的 其他参数不变

返回:

{ 
"access_token":"ACCESS_TOKEN", 
"expires_in":7200, 
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID", 
"scope":"SCOPE",
"unionid": "xxxxxx"
}

参数说明
access_token接口调用凭证
expires_inaccess_token接口调用凭证超时时间,单位(秒)
refresh_token用户刷新access_token
openid授权用户唯一标识
scope用户授权的作用域,使用逗号(,)分隔
unionid当且仅当该网站应用已获得该用户的userinfo授权时,才会出现该字段。

4. 通过第三步获取的accesstoken和openid再调用下个接口接口获取用户信息(年龄,性别,昵称,头像,国家等)。

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

返回

{ 
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "http://wx.qlogo.cn/xxxxx",
"privilege":[
"PRIVILEGE1", 
"PRIVILEGE2"
],
"unionid": " xxxx"

}
参数说明
openid普通用户的标识,对当前开发者帐号唯一
nickname普通用户昵称
sex普通用户性别,1为男性,2为女性
province普通用户个人资料填写的省份
city普通用户个人资料填写的城市
country国家,如中国为CN
headimgurl用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空
privilege用户特权信息,json数组,如微信沃卡用户为(chinaunicom)
unionid用户统一标识。针对一个微信开放平台帐号下的应用,同一用户的unionid是唯一的。

ACCECC_TOKEN OPENID替换成第三步获取到的

5、获取到用户信息后,登录到公司网站首页。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue项目中使用微信OAuth2.0授权登录,可以通过以下步骤实现: 1. 在微信公众平台或开放平台中申请应用,并获取到appID和appSecret。 2. 在Vue项目中安装wechat-oauth模块,该模块提供了微信OAuth2.0的相关接口。 ``` npm install wechat-oauth ``` 3. 在Vue项目的后端服务器中,编写一个处理微信OAuth2.0授权登录的回调接口,并在该接口中调用wechat-oauth模块提供的接口,实现用户授权登录。 ``` const OAuth = require('wechat-oauth'); const client = new OAuth(appId, appSecret); // 获取授权地址并重定向到该地址 router.get('/wechat/login', async (ctx, next) => { const redirectUrl = client.getAuthorizeURL( 'http://your-redirect-url', '', 'snsapi_userinfo' ); ctx.redirect(redirectUrl); }); // 处理授权回调 router.get('/wechat/callback', async (ctx, next) => { const code = ctx.query.code; const token = await client.getAccessToken(code); const openid = token.data.openid; const userInfo = await client.getUser(openid); // TODO: 处理用户信息 }); ``` 4. 在Vue项目中,提供一个“使用微信登录”的按钮,点击该按钮时,重定向到后端服务器中的授权接口,实现用户授权登录。 ``` <template> <div> <button @click="loginWithWechat">使用微信登录</button> </div> </template> <script> export default { methods: { loginWithWechat() { window.location.href = 'http://your-server/wechat/login'; } } } </script> ``` 需要注意的是,使用微信OAuth2.0授权登录,需要用户在微信客户端中进行操作,因此需要在移动端或微信公众号中使用。同时,需要在微信公众平台或开放平台中配置授权回调地址,并保证该地址可以被访问到。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值