第三方网站登录微信—

上面是官网发布的时序图：（前提是给第三方已经通过了微信的授权）
1、用户对第三方说：我要用微信方式登录你们
2、第三方对微信说：用户要用微信登录我们，我需要这个用户的数据
3、微信问用户：有个第三方要你数据，给不给。用户说给
4、微信对第三方说：用户同意了，你拿着临时证明来取吧
5、第三方带着临时证明和授权时候的信息取用户信息
6、微信核对以上信息后把用户信息交给第三方

第一步：
前端：
1、在页面中先引入如下JS文件（支持https）：http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
2、在需要使用微信登录的地方实例以下JS对象：

 var obj = new WxLogin({self_redirect:true,id:"login_container", appid: "", scope: "", redirect_uri: "",state: "",style: "",href: ""});

参数	说明
id	页面显示二维码的容器id
appid	申请通过的appid
scope	应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
redirect_uri	重定向地址

前端整体代码：

mounted() {// 注册全局登录事件对象window.loginEvent = new Vue(); // 监听登录事件loginEvent.$on("loginDialogEvent", function () {document.getElementById("loginDialog").click();}); // 触发事件，显示登录层：loginEvent.$emit('loginDialogEvent') //初始化微信jsconst script = document.createElement("script");script.type = "text/javascript";script.src ="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js";document.body.appendChild(script); // 微信登录回调处理let self = this;window["loginCallback"] = (name, token, openid,phone) => {self.loginCallback(name, token, openid,phone);};},methods: {weixinLogin() {this.dialogAtrr.showLoginType = "weixin";weixinApi.getLoginParam().then((response) => {//调用后端方法封装数据var obj = new WxLogin({self_redirect: true,id: "weixinLogin", // 需要显示的容器idappid: response.data.appid, // 公众号appid wx*******scope: response.data.scope, // 网页默认即可redirect_uri: response.data.redirectUri, // 授权成功后回调的urlstate: response.data.state, // 可设置为简单的随机数加session用来校验style: "black", // 提供"black"、"white"可选。二维码的样式href: "", // 外部css文件url，需要https});}).catch(()=>{console.log("出错了")});},}

后端方法：

try {String redirectUri = URLEncoder.encode(ConstantPropertiesUtil.WX_OPEN_REDIRECT_URL, "UTF-8");Map<String, Object> map = new HashMap<>();map.put("appid", ConstantPropertiesUtil.WX_OPEN_APP_ID);map.put("scope", "snsapi_login");map.put("redirectUri", redirectUri);map.put("state", System.currentTimeMillis() + "王木风");//该参数可用于防止csrf攻击（跨站请求伪造攻击），非必须携带return R.ok().data(map);} catch (UnsupportedEncodingException e) {e.printStackTrace();}

第二步：
请求：https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

参数	说明
secret	应用密钥AppSecret，申请通过后获得
appid	申请通过的appid
code	上一步获取的
grant_type	填authorization_code（固定的）

后端被回调方法：

 StringBuffer baseAccessTokenUrl = new StringBuffer().append("https://api.weixin.qq.com/sns/oauth2/access_token").append("?appid=%s").append("&secret=%s").append("&code=%s").append("&grant_type=authorization_code");String accessTokenUrl = String.format(baseAccessTokenUrl.toString(),ConstantPropertiesUtil.WX_OPEN_APP_ID,//appidConstantPropertiesUtil.WX_OPEN_APP_SECRET,//secret密钥code);
//            2.2使用工具发送请求String accesstokenInfo = HttpClientUtils.get(accessTokenUrl);

返回的accesstokenInfo（JSON串）：

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

第三步：通过access_token调用接口（根据openid访问微信获取用户信息）

String baseUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo" +"?access_token=%s" +"&openid=%s";String userInfoUrl = String.format(baseUserInfoUrl, access_token, openid);String resultInfo = HttpClientUtils.get(userInfoUrl);

第三方网站登录微信——保姆级相关推荐

从购买服务器到网站搭建成功保姆级教程~超详细
??从购买服务器到网站搭建成功保姆级教程~真的超详细,各位看官细品 ??前言 ??预备知识 ??什么是云服务器? ??什么是域名? ??什么是SSL证书? ??服务器选配 ??阿里云[官网链接](ht ...
ACME网站证书自动化保姆级教程
更好的阅读体验和更多文章请移步Blog: https://blog.zhou.icu/archives/acme网站证书自动化保姆级教程本文参考(复制)自:使用 GitHub Actions 自动申 ...
第三方网站调用微信公众号的图片被禁止
第三方网站调用微信公众号的图片被禁止借助搜狗搜索的接口来处理,让后端转码,前端调用 <meta name="referrer" content="no-refer ...
快速上手Springboot项目（登录注册保姆级教程）
本文章对SpringBoot开发后端项目结构做了简单介绍,并示范了使用SpringBoot+MySQL实现登录的后端功能,与本博客的另一篇文章 Vue 实现登录注册功能(前后端分离完整案例) | Ma ...
【宝塔面板建站】04. 设置消息通道，通过邮箱、钉钉、企业微信等形式动态提供网站信息（保姆级图文）
目录消息通道的作用设置消息通道邮箱安装模块配置SMTP服务(邮件发送者) 填写收件邮箱(邮件接收者) 收到测试邮件钉钉安装模块电脑版钉钉得到一个没用的普通群聊添加群机器人阿里云Cod ...
第三方网站接入微信JS-SDK的分享自定义设置，微信分享小图标以及标题
首先这个坑是工作遇到的问题,正好需要分享链接有小图,于是各种百度,发现这里第三方网址需要接入微信的东西,才能正常的显示出小图等. 对于想了解如何操作的,觉得我的博客看不太懂的,可以参考慕课网-微信相 ...
微博授权第三方网站登录
大致流程如下图所述前置工作去微博开放平台上(https://open.weibo.com/)申请网站接入审核通过后会给你的应用分配 App Key 和 App Secret (后续根据授权码获取 ...
微信授权登录功能(第三方网站登录)
写这篇博客的目的呢,一个是在于记录自己的开发过程,另一个目的就是将自己踩到的坑贴出来,供大家借鉴. 由于公司近期在做一个项目,在网页中使用微信扫码登录的功能,就开始了研究尝试,直到功能实现,从一脸懵逼 ...
WordPress网站更改后台登录地址保姆级图文教程
背景大家都知道WordPress系统默认的后台地址是域名/wp-admin 或域名/wp-login.php 这就意味着所有用WordPress的人都可以用这个地址打开你的后台登录页面,很明显谁都 ...

第三方网站登录微信——保姆级

第三方网站登录微信——保姆级相关推荐

最新文章

热门文章