uniapp-qq、WeChat、およびWeiboログインの承認をアプリ側で実現

アプリログインに関連するSDKは、マニフェストで構成する必要があります。

manifest.json->アプリモジュールの権限構成を開き、OAuth（ログイン認証）を確認します。
manifest.json-> App SDK構成を開き、ログイン認証を確認します。説明には青いリンクがあり、WeChat、QQ、WeiboなどのプラットフォームのSDKに適用するためのリンクが含まれています。
WeChat、QQ、Weiboおよびその他のプラットフォームにSDK情報を申請した後、マニフェストにそれを埋め戻します。
これらの構成を有効にするにはパッケージ化する必要がありますが、実際のマシンの動作はHBuilderベースの設定のままであり、カスタムベースパッケージを使用できます。オフラインパッケージについては、ネイティブプロジェクトでの構成について、オフラインパッケージのドキュメントを参照してください。
構成とパッケージ化の後、構成結果リストはuni.getProviderを介して取得できます。ここで返されるものはマニフェストによって構成され、携帯電話にWeChat、QQ、およびWeiboがインストールされているかどうかとは関係ありません。
QQとWeiboが携帯電話にインストールされていない場合、これらのプラットフォームのwapページログインが呼び出し時に起動され、対応するクライアントがインストールされている場合はクライアントログインが起動されます。

APP WeChat承認済みログイン

uni.login({
	provider: 'weixin',
	success: res => {
		uni.getUserInfo({
			provider: 'weixin',
			success: function(infoRes) {
				let formdata = {
					nickName: infoRes.userInfo.nickName,
					gender: infoRes.userInfo.gender,
                    headImgUrl: infoRes.userInfo.avatarUrl,
					openId: infoRes.userInfo.openId,
					unionId: infoRes.userInfo.unionId
				};
				uni.request({
					url: 'http://192.168.43.205:8080/thirdPartLogin/app/login',
					method: 'POST',
					data: formdata,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						if (res.data.code != 200) {
							uni.showToast({
								title: res.data.err,
								duration: 3000,
								icon: 'none'
							});
							return false;
						} else {
							//登录成功处理
							uni.showToast({
								title: res.data.message,
								duration: 3000,
								icon: 'none'
							});
							let ticket = res.data.ticket;
							uni.setStorageSync('ticket', ticket);
							uni.reLaunch({
								url: '../my/my'
							});
							return true;
						}
					}
				});
			}
		});
	},
	fail: err => {
		uni.showToast({
			title: '请求出错啦！',
			icon: 'none',
			duration: 3000
		});
	}
});

バックエンドは、unionIdに基づいてユーザーの一意性を直接判断します。

APPQQ許可ログイン

uni.login({
	provider: 'qq',
	success: resp => {
		var access_token = resp.authResult.access_token;
		uni.getUserInfo({
			provider: 'qq',
			success: function(infoRes) {
				var formdata = {
					nickName: infoRes.userInfo.nickname,
					gender: infoRes.userInfo.gender == '男' ? 1 : 2,
                    headImgUrl: infoRes.userInfo.figureurl_qq_2,
					openId: infoRes.userInfo.openId,
					access_token: access_token
				};
				uni.request({
					url: 'http://192.168.43.205:8080/thirdPartLogin/app/login',
					method: 'POST',
					data: formdata,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						if (res.data.code != 200) {
							uni.showToast({
								title: res.data.err,
								duration: 3000,
								icon: 'none'
							});
							return false;
						} else {
							//登录成功处理
							uni.showToast({
								title: res.data.message,
								duration: 3000,
								icon: 'none'
							});
							let ticket = res.data.ticket;
							uni.setStorageSync('ticket', ticket);
							uni.reLaunch({
								url: '../my/my'
							});
							return true;
						}
					}
				});
			}
		});
	},
	fail: err => {
		uni.showToast({
			title: '请求出错啦！',
			icon: 'none',
			duration: 3000
		});
	}
});

バックエンドは、access_tokenに基づいてユーザーの一意性を直接判断します。

上記のショーは最も重要なコードであり、それをコピーして使用でき、ロードを追加して自分で表示できます。

フルバージョンのuni-appは、アプリ側で次のように認証qq、WeChat、およびWeiboログインコードを実現します。

<template>
	<view class="flex align-center px-5 py-3">
		<view class="flex-1 flex align-center justify-center" v-for="(item, index) in providerList" :key="index">
			<view
				:class="item.icon + ' ' + item.bgColor"
				class="iconfont font-lg text-white flex align-center justify-center rounded-circle"
				style="width: 100rpx;height: 100rpx;"
				@click="thirdPartyLogin(index)"
			></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			providerList: []
		};
	},
	mounted() {
		uni.getProvider({
			service: 'oauth',
			success: result => {
				this.providerList = result.provider.map(value => {
					let providerName = '';
					let icon = '';
					let bgColor = '';
					switch (value) {
						case 'weixin':
							providerName = '微信登录';
							icon = 'icon-weixin';
							bgColor = 'bg-success';
							break;
						case 'qq':
							providerName = 'QQ登录';
							icon = 'icon-QQ';
							bgColor = 'bg-primary';
							break;
						case 'sinaweibo':
							providerName = '新浪微博登录';
							icon = 'icon-xinlangweibo';
							bgColor = 'bg-warning';
							break;
					}
					return {
						name: providerName,
						id: value,
						icon: icon,
						bgColor: bgColor
					};
				});
			},
			fail: error => {
				console.log('获取登录通道失败！', error);
				return false;
			}
		});
	},
	methods: {
		//第三方登录
		thirdPartyLogin(index) {
			if (index === '' || index === undefined || index === 'undefined') {
				uni.showToast({
					title: '参数错误，请联系管理员！',
					icon: 'none',
					duration: 3000
				});
				return false;
			} else {
				let loginType = '';
				// 1 判断用户的登录类型
				if (index == 0) {
					loginType = 'weixin';
				} else if (index == 1) {
					loginType = 'qq';
				} else if (index == 2) {
					loginType = 'sinaweibo';
				}
				// 2 授权登录，弹出授权窗口
				uni.login({
					provider: loginType,
					success: res => {
						var access_token = '';
						access_token = res.authResult.access_token;
						// 3 授权登录成功以后，获取用户的信息
						uni.getUserInfo({
							provider: loginType,
							success: function(infoRes) {
								let formdata = {};
								if (index == 0) {
									formdata = {
										nickName: infoRes.userInfo.nickName,
										gender: infoRes.userInfo.gender,
										headImgUrl: infoRes.userInfo.avatarUrl,
										openId: infoRes.userInfo.openId,
										unionId: infoRes.userInfo.unionId,
										access_token: access_token,
										appLoginType: 'WEIXIN'
									};
								} else if (index == 1) {
									formdata = {
										nickName: infoRes.userInfo.nickname,
										gender: infoRes.userInfo.gender == '男' ? 1 : 2,
										headImgUrl: infoRes.userInfo.figureurl_qq_2,
										openId: infoRes.userInfo.openId,
										unionId: '',
										access_token: access_token,
										appLoginType: 'QQ'
									};
								} else if (index == 2) {
									formdata = {
										nickName: infoRes.userInfo.nickname,
										gender: infoRes.userInfo.gender == 'm' ? 1 : 2,
										headImgUrl: infoRes.userInfo.avatar_large,
										openId: infoRes.userInfo.id,
										unionId: '',
										access_token: access_token,
										appLoginType: 'SINAWEIBO'
									};
								}
								// 4 调用开发者后台，执行一键注册或登录
								uni.request({
									url: 'http://192.168.43.205:8080/thirdPartLogin/app/login',
									method: 'POST',
									data: formdata,
									header: {
										'content-type': 'application/x-www-form-urlencoded'
									},
									success: res => {
										if (res.data.code != 200) {
											uni.showToast({
												title: res.data.err,
												duration: 3000,
												icon: 'none'
											});
											return false;
										} else {
											//登录成功处理
											uni.showToast({
												title: res.data.message,
												duration: 3000,
												icon: 'none'
											});
											let ticket = res.data.ticket;
											// 5 保存用户信息到全局的缓存中
											uni.setStorageSync('ticket', ticket);
											// 6 切换页面跳转，使用tab切换的api
											uni.switchTab({
												url: '../my/my'
											});
											return true;
										}
									}
								});
							}
						});
					},
					fail: err => {
						uni.showToast({
							title: '请求出错啦！',
							icon: 'none',
							duration: 3000
						});
					}
				});
			}
		}
	}
};
</script>

<style></style>