微信公众号授权登录的超详细步骤

 更新时间:2022年12月09日 11:43:42   作者:sunly_  
微信公众号授权登录的使用最为常见,当然只是一些会只有登录,所以选择点击授权登,下面这篇文章主要给大家介绍了微信公众号授权登录的超详细步骤,需要的朋友可以参考下

第一步:用户同意授权,获取code

在确保公众账号拥有授权作用域(scope参数)的权限的前提下,引导关注者打开如下页面:

尤其注意:如果链接的参数顺序不对,授权页面将无法正常访问

https://open.weixin.qq.com/connect/oauth2/authorize
?appid=APPID // 公众号的唯一标识
&redirect_uri=REDIRECT_URI // 授权后重定向的回调链接地址, 使用 urlEncode 对链接进行处理
&response_type=code // 返回类型,填写code
&scope=SCOPE // 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )
&state=STATE#wechat_redirect // 重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节。#wechat_redirect	是	无论直接打开还是做页面302重定向时候,必须带此参数

若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限。

参考链接(请在微信客户端中打开此链接体验):

尤其注意:跳转回调redirect_uri,应当使用https链接来确保授权code的安全性。

// scope为snsapi_base
https://open.weixin.qq.com/connect/oauth2/authorize
?appid=wx520c15f417810387
&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60
&response_type=code
&scope=snsapi_base
&state=123#wechat_redirect

//scope为snsapi_userinfo
https://open.weixin.qq.com/connect/oauth2/authorize
?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php
&response_type=code
&scope=snsapi_userinfo
&state=STATE#wechat_redirect

用户同意授权后

如果用户同意授权,页面将跳转至

redirect_uri/?code=CODE&state=STATE。

第二步:通过code换取网页授权access_token

公众号可通过下述接口来获取网页授权access_token。如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止。

尤其注意:由于公众号的secret和获取到的access_token安全级别都非常高,必须只保存在服务器,不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤,也必须从服务器发起。

// 请求方法
// 获取code后,请求以下链接获取access_token: 
https://api.weixin.qq.com/sns/oauth2/access_token
?appid=APPID // 公众号的唯一标识
&secret=SECRET // 公众号的appsecret
&code=CODE // 填写第一步获取的code参数
&grant_type=authorization_code // 	填写为authorization_code

// 返回说明
// 正确时返回的JSON数据包如下:
{
  "access_token":"ACCESS_TOKEN", // 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
  "expires_in":7200, // access_token接口调用凭证超时时间,单位(秒)
  "refresh_token":"REFRESH_TOKEN", // 用户刷新access_token
  "openid":"OPENID", // 用户唯一标识
  "scope":"SCOPE"  // 用户授权的作用域,使用逗号(,)分隔
}

第三步:刷新access_token(如果需要)

access_token拥有较短的有效期,当access_token超时后,可以使用refresh_token进行刷新,refresh_token有效期为30天,当refresh_token失效之后,需要用户重新授权。

// 请求方法
// 获取第二步的refresh_token后,请求以下链接获取access_token: 
https://api.weixin.qq.com/sns/oauth2/refresh_token
?appid=APPID // 公众号的唯一标识
&grant_type=refresh_token // 填写为refresh_token
&refresh_token=REFRESH_TOKEN // 填写通过access_token获取到的refresh_token参数

//返回说明
//正确时返回的JSON数据包如下:
{ 
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}

第四步:拉取用户信息(需scope为 snsapi_userinfo)

如果网页授权作用域为snsapi_userinfo,则此时开发者可以通过access_token和openid拉取用户信息了。

//请求方法
//http:GET(请使用https协议)
https://api.weixin.qq.com/sns/userinfo
?access_token=ACCESS_TOKEN // 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
&openid=OPENID // 用户的唯一标识
&lang=zh_CN // 国家地区语言版本

//返回说明
//正确时返回的JSON数据包如下:
{   
  "openid": "OPENID",
  "nickname": NICKNAME,
  "sex": 1,
  "province":"PROVINCE",
  "city":"CITY",
  "country":"COUNTRY",
  "headimgurl":"https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
  "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

附:检验授权凭证(access_token)是否有效

// 请求方法
// http:GET(请使用https协议) 
https://api.weixin.qq.com/sns/auth
?access_token=ACCESS_TOKEN
&openid=OPENID

示例:

<script>
	// 1、授权
	export default {
		onLoad() {
			this.wx_login();
		},
		methods: {
			//微信登录
			wx_login(){
				let appId= 'wxe1*******2d0d3d';
				let Host = encodeURIComponent('https://ceshi.com/pages/guide/getOpenid');
				console.log(Host);
				window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?
				appid=${appId}
				&redirect_uri=${Host}
				&response_type=code
				&scope=snsapi_userinfo
				&state=STATE#wechat_redirect`
			},
		},
	}
	
	// getOpenid页面获取openid
	export default {
		onLoad(option) {
			var arr = window.location.search;
			var code = arr.split('=')[1].split('&')[0];
			this.$http.post("/api/WxPay/getOpenid",{
				code:code
			}).then(res=>{
				if(res.code == 1){
					uni.setStorageSync('openid', res.data.openid);
					this.$goBack(3,'/pages/index/index')
				}
			})
		},
	}
</script>

总结

到此这篇关于微信公众号授权登录的文章就介绍到这了,更多相关微信公众号授权登录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript实现翻页功能(附效果图)

    JavaScript实现翻页功能(附效果图)

    这篇文章主要介绍了JavaScript实现翻页功能(附效果图),在项目需求中经常遇到,今天小编抽时间给大家分享JavaScript实现翻页功能实例代码,需要的朋友参考下吧
    2017-02-02
  • console.log()与console.dir()的区别及说明

    console.log()与console.dir()的区别及说明

    这篇文章主要介绍了console.log()与console.dir()的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • js 金额格式化来回转换示例

    js 金额格式化来回转换示例

    这篇文章主要介绍了js 金额格式化来回转换实现,需要的朋友可以参考下
    2014-02-02
  • JavaScript使用indexOf()实现数组去重的方法分析

    JavaScript使用indexOf()实现数组去重的方法分析

    这篇文章主要介绍了JavaScript使用indexOf()实现数组去重的方法,结合实例形式分析了使用indexOf()方法进行数组的判断与去重相关原理与具体操作技巧,需要的朋友可以参考下
    2018-09-09
  • JavaScript设计模式之策略模式详解

    JavaScript设计模式之策略模式详解

    这篇文章主要为大家详细介绍了JavaScript设计模式之策略模式的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • js实现拉幕效果的广告代码

    js实现拉幕效果的广告代码

    这篇文章主要介绍了js实现拉幕效果的广告代码,涉及javascript定时操作页面元素属性变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • Bootstrap 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。下面通过本文给大家介绍Bootstrap 轮播(Carousel)插件,非常不错,需要的朋友参考下吧
    2016-12-12
  • 网页和浏览器兼容性问题汇总(draft1)

    网页和浏览器兼容性问题汇总(draft1)

    由于IE扩展了许多私有的DOM、CSS等导致许多网页的开发者都根据IE开发,才导致许多网页的不规范,从而导致现在的浏览器浏览相同网页效果不尽相同。
    2009-06-06
  • 谈谈为什么你的 JavaScript 代码如此冗长

    谈谈为什么你的 JavaScript 代码如此冗长

    这篇文章主要介绍了谈谈为什么你的 JavaScript 代码如此冗长,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 解决Webpack 热部署检测不到文件变化的问题

    解决Webpack 热部署检测不到文件变化的问题

    下面小编就为大家分享一篇解决Webpack 热部署检测不到文件变化的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论