uniapp微信授权登录

uniapp微信登录之app和微信小程序登录

以下介绍app微信登录和微信小程序登录，其他平台根据需求处理。

欢迎指教~

文章目录

uniapp微信登录之app和微信小程序登录
- 效果图
- 官方文档
- 前提
- 方式一：常用方式
- 方式二：结合html5+相关方法实现
- 微信小程序直接获取用户信息
- - 返回数据效果图
- 获取所有服务供应商

效果图

官方文档

uni.login

uni.getProvider

前提

需要相关配置

授权登录插件配置

方式一：常用方式

<button class="" @click="weixinOauthByLogin">微信授权登录</button>

说明：

获取服务供应商
调用登录api
发送请求【因不同平台返回数据不一样，可以和后端商量具体传参，再根据实际来处理】

<script>export default {methods: {/*** 微信授权登录*/weixinOauthByLogin() {uni.getProvider({service: 'oauth',success: (res) => {console.log(res.provider);if (~res.provider.indexOf('weixin')) {uni.login({provider: 'weixin',success: (loginRes) => {console.log('获取登录信息', loginRes);//------- 以下根据实际需求处理 以下仅参考 --------// #ifdef APP-PLUSuni.getUserInfo({success: (resInfo) => {console.log(resInfo);/*** 发送请求，这里具体传参根据实际需求处理*/this.queryUserInfo(resInfo)},fail: (error) => {console.log(error)}})// #endif// #ifdef MP-WEIXINthis.queryUserInfo(loginRes.code)// #endif},complete: (error) => {console.log(error)}})}}})},/*** 发送请求，仅供参考* */queryUserInfo(data) {uni.request({url: 'https://xxx/api/account/minilogin',method: 'POST',data: {// #ifdef APP-PLUSopenid: data.authResult.openid// #endif// #ifdef MP-WEIXINcode: data// #endif},success: (res) => {console.log('=====request=====>', res);if (res.data.code !== 200) {uni.showToast({title: res.data.msg,icon: 'none'})return;}// 发送请求成功， 根据实际需求处理uni.showToast({title: '登录成功'})},fail: (error) => {console.log('请求接口失败', error)}})},}}
</script>

注意：

uni.getUserInfo 微信小程序端，在用户未授权过的情况下调用此接口，不会出现授权弹窗，会直接进入fail回调。在用户已授权的情况下调用此接口，可成功获取用户信息。
微信小程序端如果需要用户信息，可以通过：

发送请求登录成功让后端返回相关信息
通过getuserinfo获取【文章有介绍】

uni.login在微信小程序平台返回是code值， App中返回有authResult中登录信息【authResult登录服务商提供的登录信息，服务商不同返回的结果不完全相同】 如下图
微信小程序

APP端

方式二：结合html5+相关方法实现

仅供参考：这里代码看起来比较多，如果只实现微信登录可进行删减，根据实际需求优化。

结合html5+中的OAuth模块管理客户端的相关用户登录授权方法。
下面实现APP及微信小程序微信登录，通过得到code发送给后端

<button type="primary" class="button" v-for="(value, index) in providerListPlus" @click="loginByWeixin(value.value)" :key="index">{{value.value}} login</button>

说明：

getServices() 获取登录授权认证服务列表
initProvider() 获取服务供应商
微信授权相关api调用
如果只实现微信登录，可以删减下面相关代码。【此方式比较适合多个平台处理】

<script>let weixinAuthServiceexport default {data() {providerListPlus: [],},onLoad() {// #ifdef APP-PLUSthis.getServices();// #endif},onReady() {this.initProvider();  },methods: {/*** 获取登录授权认证服务列表*/getServices() {plus.oauth.getServices((services) => {weixinAuthService = services.find((service) => {return service.id === 'weixin'})if (weixinAuthService) {this.hasWeixinAuth = true}});},/*** 获取服务供应商*/initProvider() {// 根据个人需求配置const filters = ['weixin', 'qq', 'sinaweibo', 'alipay', 'toutiao'];uni.getProvider({service: 'oauth',success: (res) => {if (res.provider && res.provider.length) {for (let i = 0; i < res.provider.length; i++) {if (~filters.indexOf(res.provider[i])) {this.providerListPlus.push({value: res.provider[i], // weixin...});}}this.hasProvider = true;}},fail: (err) => {console.error('获取服务供应商失败：' + JSON.stringify(err));}});},/*** 微信登录事件*/loginByWeixin(value) {this.oauth(value).then((code) => {console.log('oauth===code=======》', code)// 方式一： 如果服务端使用uniCloud，请查看 https://uniapp.dcloud.io/api/plugins/login?id=login// 方式二： 把得到的code, 发送给后端return new Promise((resolve, reject) => {// 这里测试，请求方法未封装uni.request({url: 'https://xxx.com/api/minilogin',method: 'POST',data: {code: code},success: (res) => {console.log('=====request=====>', res);resolve(res);},fail: (error) => {console.log('请求接口失败', error)reject(new Error('请求接口失败'))}})})}).then((res) => {console.log('oauth==then==res=======>', res)if (res.data.code !== 200) {uni.showToast({title: res.data.msg,icon: 'none'})return;}// 请求接口成功 根据需求处理数据uni.showToast({title: '登录成功'})}).catch((e) => {console.error(e)uni.showModal({showCancel: false,content: '微信登录失败，请稍后再试'})})},/*** 根据不同平台 处理微信登录逻辑*/oauth(value) {// 如果当前操作不是 weixinif (value !== 'weixin') {uni.login({provider: value,success: (res) => {uni.getUserInfo({provider: value,success: (infoRes) => {/*** 获取用户信息后，将信息发送给服务端。* 根据需要处理*/},fail() {uni.showToast({icon: 'none',title: '登陆失败'});}});},fail: (err) => {console.error('授权登录失败：' + JSON.stringify(err));}});return;   }/*** 根据需求来处理* 下面处理 app-plus 及 weixin*/return new Promise((resolve, reject) => {// #ifdef APP-PLUSweixinAuthService.authorize(function(res) {console.log('========authorize success======', res)resolve(res.code)}, function(err) {console.error(err)reject(new Error('微信登录失败'))});// #endif// #ifdef MP-WEIXINuni.login({provider: value,success: (res) => {console.log('授权登录成功--得到code-->', res.code)// 如需要获取用户信息 调用 uni.getUserInfo({})resolve(res.code)},fail: (error) => {console.error('授权登录失败：' + JSON.stringify(err));reject(new Error('微信登录失败'))}})// #endif})}}}
</script>

微信小程序直接获取用户信息

可通过getUserInfo获取用户信息
withCredentials 是否带上登录态信息

<button open-type="getUserInfo" @getuserinfo="getUserInfo" withCredentials="true">直接获取用户信息</button>

<script>export default {data() {return {loginCode: [], // code}},onLoad() {// 获取登录codethis.getLoginCode();},methods: {/***  微信小程序 获取用户信息*/ getUserInfo({ detail }) {console.log('-----getUserInfo-------->', detail)if (detail.userInfo) {/*** 发送请求*/this.queryUserInfo(this.loginCode, detail)} else {uni.showToast({title: '登录失败',icon: 'none'})}},/*** 获取登录code*/getLoginCode() {uni.login({success: (res) => {console.log(res)this.loginCode = res.code;},fail: (error) => {console.log(error)}})}}}
</script>

返回数据效果图

获取所有服务供应商

根据在manifest中配置相关模块和SDK信息，运行时就能得到相应的服务供应商。

<button type="primary" class="button" v-for="(value, key) in providerList" @click="tologin(value)" :key="key">{{value.name}}</button>

<script>export default {data() {return {providerList: []}},onLoad() {this.getProvider();},methods: {/*** 获取服务供应商*/getProvider() {uni.getProvider({service: 'oauth',success: (result) => {this.providerList = result.provider.map((value) => {let providerName = '';switch (value) {case 'weixin':providerName = '微信登录'break;case 'qq':providerName = 'QQ登录'break;case 'sinaweibo':providerName = '新浪微博登录'break;case 'xiaomi':providerName = '小米登录'break;case 'alipay':providerName = '支付宝登录'break;case 'baidu':providerName = '百度登录'break;case 'toutiao':providerName = '头条登录'break;case 'apple':providerName = '苹果登录'break;}return {name: providerName,id: value}});},fail: (error) => {console.log('获取登录通道失败', error);}});},}}
</script>

uniapp微信授权登录相关推荐

uni-app微信授权登录，校验临时凭证获取唯一标识
uni-app微信授权,新版4.28,多种方式校验临时凭证code来获取openid 前言一.授权流程 1.流程图 2.授权操作 1.加载登录页判断缓存,自动登录 2.授权同意与拒绝 3.获取服务供 ...
微信授权登录，uniapp微信授权登录，wap2app微信授权登录，h5plus微信授权登录
既然是Dcloud产品,那编译器不约而同使用HBuilderX,并且下面的截图是前提 UniAPP中的微信登陆(APP端) uni.login({provider: 'weixin',success: ...
uniapp开发h5微信授权登录(详细教程)
uniapp开发h5微信授权登录文章目录 uniapp开发h5微信授权登录前言一.前期准备--申请测试账号二.正式开发--前端代码三.打包发布总结前言我也是第一次做h5授权微信登录,网 ...
uniapp获取微信授权登录和手机号一键登录（保姆教程）
uniapp获取微信授权登录(保姆教程) 第一步下载官方给的解密文件'mWXBizDataCrypt' 没有文件就复制该文件的代码创建一个 var crypto = require('crypto' ...
uni-app授权第三方登录（微信授权登录）
APP微信授权登录需要到微信开放平台申请,在HBuilderX配置APP SDK中微信登录的appId,另外需要跟小程序.公众号授权账号互通的话也需要在微信开放平台申请,这是需要付费的呦(300元) ...
uni app和php开发微信登录代码,uniapp如何实现微信授权登录
uniapp实现微信授权登录的方法:首先获取对应的appid和appsecret:然后在uniapp项目的manifest.json中进行APP SDK配置和模块权限配置.最后实现编码. 本教程操作环 ...
uniapp微信一键登录微信授权
前言现在小程序逐渐成为主流,常用的微信授权登录很重要很常见的一个功能,今天自己总结了一下. 准备工作 1.如果你想自己想试一下这个功能首先你需要有一个开发中的项目并且你在开发成员里面. 2.配置自己 ...
uniapp - 编译微信小程序项目的微信授权登录、获取微信手机号登录、最新版微信直接登录、手机与验证码登录的示例源码（适用于 uniapp 微信小程序项目，源代码直接开箱即用）超级详细的代码及注释
效果图 uniapp 项目编译微信小程序,一些常见的登录方式及源代码,示例代码干净整洁无BUG拿来即用. 本文示例实现了 uniapp 微信小程序项目的登录功能,包含微信授权登录.获取微信手机号登录. ...
uniapp - 超详细的 H5 公众号网页微信登录示例代码，提供从 0-1 公众号配置及详细注释代码（站在新手小白的角度）第三方微信授权登录的实现！！
介绍目前示例是 "点击按钮登录",你也可以改为 "一进页面就登录" ,可随意改造. 百度的教程都太乱了,而且功能都有一定问题.本文主要讲解 uniapp H5 ...
新！uniapp微信小程序微信授权登录
11月后,微信小程序对于微信授权登录做了逻辑上的更改,之前的一键授权获取用户信息的功能已不再适用.已发布审核完成的小程序不受影响,但要想再发布,只能换成新的登陆逻辑了. 首先,要说明的,个人中心页面, ...

uniapp微信授权登录

uniapp微信登录之app和微信小程序登录

文章目录

效果图

官方文档

前提

方式一：常用方式

方式二：结合html5+相关方法实现

微信小程序直接获取用户信息

返回数据效果图

获取所有服务供应商

uniapp微信授权登录相关推荐

最新文章

热门文章

uniapp微信授权登录

uniapp微信登录之app和微信小程序登录

文章目录

效果图

官方文档

前提

方式一： 常用方式

方式二： 结合html5+相关方法实现

微信小程序直接获取用户信息

返回数据效果图

获取所有服务供应商

uniapp微信授权登录相关推荐

最新文章

热门文章

方式一：常用方式

方式二：结合html5+相关方法实现