uniapp微信授权登录

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

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

欢迎指教~

效果图

官方文档

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-PLUS
                                    uni.getUserInfo({
                                        success: (resInfo) => {
                                            console.log(resInfo);
                                            /**
                                             * 发送请求，这里具体传参根据实际需求处理
                                             */
                                            this.queryUserInfo(resInfo)
                                        },
                                        fail: (error) => {
                                            console.log(error)
                                        }
                                    })
                                    // #endif
                                    
                                    // #ifdef MP-WEIXIN
                                    this.queryUserInfo(loginRes.code)
                                    // #endif
                                    
								},
								complete: (error) => {
									console.log(error)
								}
							})
						}
					}
				})
			},
            
            /**
             * 发送请求，仅供参考
             * 
             */
            queryUserInfo(data) {
				uni.request({
					url: 'https://xxx/api/account/minilogin',
					method: 'POST',
					data: {
						// #ifdef APP-PLUS
                        openid: data.authResult.openid
                        // #endif
						// #ifdef MP-WEIXIN
						code: 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回调。在用户已授权的情况下调用此接口，可成功获取用户信息。

• 微信小程序端 如果需要用户信息，可以通过：

1. 发送请求登录成功让后端返回相关信息
2. 通过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 weixinAuthService
    export default {
		data() {
            providerListPlus: [],
        },
        onLoad() {
			// #ifdef APP-PLUS
			this.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) {
                // 如果当前操作不是 weixin
				if (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-PLUS
					weixinAuthService.authorize(function(res) {
						console.log('========authorize success======', res)
						resolve(res.code)
					}, function(err) {
						console.error(err)
						reject(new Error('微信登录失败'))
					});
					// #endif

                    
					// #ifdef MP-WEIXIN
					uni.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() {
            // 获取登录code
            this.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>