uniapp开发微信公众号调用微信授权登录

微信公众号调用微信授权登录

1.登录页面

<view class="submit1 disflex" style="justify-content: center;" @tap="submit"><image src="/static/image/wechat_icon.png" mode=""></image><text>登录</text>
</view>

submit() {const that = this;// #ifdef H5let appid = 'xxxxxxxx'//调用微信接口后回调重定向页面地址let redirect_uri = 'https://www.xxx.com/pages/index/mask'  // 授权登录成功回调的地址（域名+路径），一般为当前页，此处我用的是新页面window.location = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +appid +'&redirect_uri=' +redirect_uri +'&response_type=code&scope=snsapi_userinfo&state=abcdefghigklmnopqrstuvwxyz#wechat_redirect',// #endif}

2.接收参数页面 pages/index/mask

onLoad(param) {const that = this;//在H5页面 param.code 无法获取code值// #ifdef H5let search =  window.location.search.split('?')[1] || '';if (search){//在H5页面获取code值let code  = this.functiongetQueryString('code')console.log(code)//通过code值请求鉴权接口获取后台数据that.$http.get('api/wx_oauth',{code:code}).then(res => {console.log("授权登录", res);if (res.status_code == 200) {let open_id = res.data.open_id;let nickname = res.data.nickname;let avatar = res.data.avatar;//利用open_id  nickname  avatar 调用登录that.$http.post("api/login", {open_id: open_id,nickname: nickname,avatar: avatar,}).then(res1 => {console.log('登录信息', res1)})} else {that.$tool.toast(res.message)}})}   // #endif},
methods: {// h5页面获取页面传参functiongetQueryString(name){const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');const search =  window.location.search.split('?')[1] || '';const r = search.match(reg) || [];return r[2];},
}

参考文献：

文章地址 https://www.cnblogs.com/0201zcr/p/5131602.html

微信公众平台开发——微信授权登录（OAuth2.0）

1、OAuth2.0简介

OAuth（开放授权）是一个开放标准，允许用户让第三方应用访问该用户在某一网站上存储的私密的资源（如照片，视频，联系人列表），而无需将用户名和密码提供给第三方应用。

允许用户提供一个令牌，而不是用户名和密码来访问他们存放在特定服务提供者的数据。每一个令牌授权一个特定的网站（例如，视频编辑网站)在特定的时段（例如，接下来的2小时内）内访问特定的资源（例如仅仅是某一相册中的视频）。这样，OAuth允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息，而不需要分享他们的访问许可或他们数据的所有内容。

我们这里主要模拟在微信公众号中使用OAuth2.0进行授权，获取用户的基本信息的过程。详细的开发文档可查看微信的官方文档。

微信公众平台开发者文档：

http://mp.weixin.qq.com/wiki/14/89b871b5466b19b3efa4ada8e577d45e.html

2、获取测试公众账号及其相关配置

1）、公众测试账号获取

访问上面的连接，选择“接口测试号申请”获得直接打开http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index通过微信客户端扫码登录即可登录。

登录完即可获取到一个测试公众账号的信息。主要有appId和appsecret两个参数，这将唯一标示一个公众号，并且需要将他们作为参数获取用户的信息。

2）、关注公众号

用户只有关注了这个公众号了，才能通过打开有公众号信息的链接去授权第三方登录，并获取用户信息的操作。故我们还需要用我们的微信关注微信号，操作如下：

还是刚刚那个登录成功后跳转的页面，我们可以看到，该页面有一个二维码，我们可以通过扫描该二维码进行关注，关注成功在右边的“用户列表”会多一个用户的信息。如下图所示：

3）、配置回调函数

我们在微信客户端访问第三方网页（即我们自己的网页）的时候，我们可以通过微信网页授权机制，我们不仅要有前面获取到的appid和appsecret还需要有当用户授权之后，回调的域名设置，即用户授权后，页面会跳转到哪里。具体的配置如下：

还是在刚刚的页面，有一个“网页授权获取用户基本信息”，点击后面的修改

填写回调的域名：

如果你的网址没有被列入过黑名单，就会在顶部出现

然后，域名配置就成功了！

注意：

1、这里填写的是域名（是一个字符串），而不是URL，因此请勿加http://等协议头；
2、授权回调域名配置规范为全域名，比如需要网页授权的域名为：www.qq.com，配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com无法进行OAuth2.0鉴权

到这里，我们就获取到我们必须用到的测试信息了，包括

3、微信授权登录并获取用户基本信息

微信授权使用的是OAuth2.0授权的方式。主要有以下简略步骤：

第一步：用户同意授权，获取code

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

第三步：刷新access_token（如果需要）

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

详细的步骤如下：

1．用户关注微信公众账号。

2．微信公众账号提供用户请求授权页面URL。

3．用户点击授权页面URL，将向服务器发起请求

4．服务器询问用户是否同意授权给微信公众账号(scope为snsapi_base时无此步骤)

5．用户同意(scope为snsapi_base时无此步骤)

6．服务器将CODE通过回调传给微信公众账号

7．微信公众账号获得CODE

8．微信公众账号通过CODE向服务器请求Access Token

9．服务器返回Access Token和OpenID给微信公众账号

10．微信公众账号通过Access Token向服务器请求用户信息(scope为snsapi_base时无此步骤)

11．服务器将用户信息回送给微信公众账号(scope为snsapi_base时无此步骤)

1）、用户授权并获取code

在域名（前面配置的回调域名）根目录下，新建一个文件，命名为oauth.php(名字随便你取，下面的redirect_uri做相应修改即可）该php实现的功能也很简单，只是将url上的code参数取出来并打印出来而已，方便我们进行接下来的操作。

Oauth.php中的内容如下：

[](javascript:void(0)

uniapp开发微信公众号调用微信授权登录相关推荐

微信支付图片上传java_微信开发-----微信公众号调用微信上传图片接口
$(function () { var url = location.href.split('#')[0]; var date = "url=" + url; //get中url指 ...
Vue开发微信公众号调用微信JS-SDK的分享接口（实现微信公众号分享功能）
描述使用微信提供的分享功能,其实就是JSSDK使用,使用它提供的接口功能. 可以先看下微信公众号开发文档,上面介绍的很详细.提供了那些功能,怎么去使用. https://developers.wei ...
基于Thinkphp5+EasyWeChat+fastadmin微信小程序授权登录获取手机号微信公众号网页---联合授权登录
战前准备 1.使用 composer 安装 EasyWeChat $ composer require overtrue/wechat:~4.0 -vvv 或者在composer.json文件renq ...
微信公众号扫码授权登录思路
引言上学期研究了一下微信登录相关内容,也写了两三篇笔记,但是最后实际登录流程没有写,主要因为感觉功能完成有所欠缺,一直也没有好的思路:这两天我又看了看官方文档,重新构思了一下微信公众号登录相关的内容 ...
微信公众号调用微信接口上传图片
首先利用微信JS-SDK接口,借助微信高效地使用拍照.选图,上传至微信服务器,然后通过微信多媒体接口下载图片到自己的服务器. 1.获取全局的access_token和jsapi_ticket以作备用 ...
uniapp开发微信公众号网页-微信JSSDK使用
uniapp开发微信公众号网页-微信JSSDK使用一. 安装jweixin-module 二. 新建js文件,把jssdk的接口简单封装,然后挂载到vue实例 1. 在js公共文件夹下创建wecha ...
Shopro商城高级版 Fastadmin和Uniapp进行开发的多平台商城（微信公众号、微信小程序、H5网页、Android-App、IOS-App）
Shopro商城无加密的开源源码(可用于自营+外包项目(多主体).可用于外包定制开发项目) shopro 商城,一款基于 uni-app 的前端模板商城.目前适配了(小程序+app+h5+公众号). ...
Shopro商城,基于Fastadmin和Uniapp进行开发的多平台（微信公众号、微信小程序、H5网页、Android-App、IOS-App）购物商城
Shopro商城基于Fastadmin和Uniapp进行开发的多平台(微信公众号.微信小程序.H5网页.Android-App.IOS-App)购物商城,拥有强大的店铺装修.小程序直播.自定义模板. ...
微信，支付宝支付，微信公众号小程序授权等
微信,支付宝支付,微信公众号小程序授权等前言微信支付微信授权 maven依赖(更新) 前言最近在公司也做了很多移动端项目,如今微信公众号,小程序又特别火爆,免不了要接触支付,授权这类的业务需求 ...
springmvc开发微信公众号接口微信公众号测试账号配置接口Token验证
转:springmvc开发微信公众号接口微信公众号测试账号配置接口Token验证开发前必读以及准备工作: 1.微信公众平台开发是指为微信公众号进行业务开发,为移动应用.PC端网站.公众号第三方平台 ...

uniapp开发微信公众号调用微信授权登录

微信公众号调用微信授权登录

参考文献：

微信公众平台开发——微信授权登录（OAuth2.0）

uniapp开发微信公众号调用微信授权登录相关推荐

最新文章

热门文章