add(APP): 新增一键登录示例

pages/API/login/login.vue

@@ -4,7 +4,12 @@
 		<view class="uni-padding-wrap">
 			<view style="background:#FFF; padding:40rpx;">
 				<block v-if="hasLogin === true">
-					<view class="uni-h3 uni-center uni-common-mt">已登录</view>
+					<view class="uni-h3 uni-center uni-common-mt">已登录
+						<text v-if="isUniverifyLogin" style="font-size: 0.8em;">
+							<i v-if="!phoneNumber.length" class="uni-icon_toast uni-loading"></i>
+							<i v-else>（{{phoneNumber}}）</i>
+						</text>
+					</view>
 					<view class="uni-hello-text uni-center">
 						<text>每个账号仅需登录 1 次，\n后续每次进入页面即可自动拉取用户信息。</text>
 					</view>
@@ -23,7 +28,8 @@
 				</button>
 				<!-- #endif -->
 				<!-- #ifndef MP-TOUTIAO -->
-				<button type="primary" class="page-body-button" v-for="(value,key) in providerList" @click="tologin(value)" :key="key">{{value.name}}</button>
+				<button type="primary" class="page-body-button" v-for="(value,key) in providerList" :disabled="value.id === 'univerify' ? univerifyBtnDisabled : false"
+				 @click="tologin(value)" :key="key">{{value.name}}</button>
 				<!-- #endif -->
 			</view>
 		</view>
@@ -34,16 +40,19 @@
 		mapState,
 		mapMutations
 	} from 'vuex'
+	const univerifyInfoKey = 'univerifyInfo';
 
 	export default {
 		data() {
 			return {
 				title: 'login',
-				providerList: []
+				providerList: [],
+				phoneNumber: '',
+				univerifyBtnDisabled: true
 			}
 		},
 		computed: {
-			...mapState(['hasLogin'])
+			...mapState(['hasLogin', 'isUniverifyLogin'])
 		},
 		onLoad() {
 			uni.getProvider({
@@ -76,6 +85,25 @@
 							case 'apple':
 								providerName = '苹果登录'
 								break;
+							case 'univerify':
+								uni.preLogin({
+									provider: value,
+									success: (res) => {
+										// 成功
+										console.log("preLogin success: ", res);
+										this.univerifyBtnDisabled = false;
+									},
+									fail: (res) => {
+										// 失败
+										console.log("preLogin fail: ", res);
+										// 失败
+										console.log("preLogin fail: ", res.errCode)
+										console.log("preLogin fail: ", res.errMsg)
+										this.setUniverifyLogin(false);
+									}
+								})
+								providerName = '一键登录'
+								break;
 						}
 						return {
 							name: providerName,
@@ -88,9 +116,25 @@
 					console.log('获取登录通道失败', error);
 				}
 			});
+
+			uni.onAuthViewOtherLoginButtonClick(() => {
+				uni.closeAuthView();
+				this.Toast({
+					title: '其他登录方式'
+				})
+			})
+
+			if (this.hasLogin && this.isUniverifyLogin) {
+				this.getPhoneNumber(uni.getStorageSync(univerifyInfoKey))
+			}
 		},
 		methods: {
-			...mapMutations(['login']),
+			...mapMutations(['login', 'setUniverifyLogin']),
+			Toast(data, duration = 1000) {
+				uni.showToast(Object.assign({}, data, {
+					duration
+				}))
+			},
 			tologin(provider) {
 				uni.login({
 					provider: provider.id,
@@ -101,19 +145,40 @@
 						console.log('login success:', res);
 						// 更新保存在 store 中的登录状态
 						this.login(provider.id);
-						// #ifdef MP-WEIXIN
+
+						if (provider.id === 'univerify') {
+							this.setUniverifyLogin(true);
+							uni.closeAuthView();
+
+							const {
+								access_token,
+								openid
+							} = res.authResult
+
+							// 注意大小写
+							const univerifyInfo = {
+								provider: provider.id,
+								accessToken: access_token,
+								openid
+							}
+
+							this.getPhoneNumber(univerifyInfo);
+						} else {
+							this.setUniverifyLogin(false);
+						}
+						// #ifdef MP-WEIXIN
 						console.warn('如需获取openid请参考uni-id: https://uniapp.dcloud.net.cn/uniCloud/uni-id')
-						uni.request({
-							url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/user-center',
-							method:'POST',
+						uni.request({
+							url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/user-center',
+							method: 'POST',
 							data: {
 								action: 'loginByWeixin',
 								params: {
-									code: res.code,
+									code: res.code,
 									platform: 'mp-weixin'
 								}
 							},
-							success(res) {
+							success(res) {
 								console.log(res);
 								if (res.data.code !== 0) {
 									console.log('获取openid失败：', res.result.msg);
@@ -131,6 +196,35 @@
 						console.log('login fail:', err);
 					}
 				});
+			},
+			getPhoneNumber(univerifyInfo) {
+				uni.request({
+					url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/univerify-login',
+					method: 'POST',
+					data: univerifyInfo,
+					success: (res) => {
+						console.log(res);
+						const {
+							data
+						} = res;
+						if (data.success) {
+							this.phoneNumber = data.phoneNumber;
+							uni.setStorageSync(univerifyInfoKey, univerifyInfo)
+						} else {
+							this.Toast({
+								icon: 'none',
+								title: `手机号获取失败`
+							})
+							console.error(res);
+						}
+
+					},
+					fail: (err) => {
+						this.Toast({
+							title: '一键登录失败'
+						})
+					}
+				})
 			}
 		}
 	}

store/index.js

@@ -5,7 +5,8 @@ Vue.use(Vuex)
 
 const store = new Vuex.Store({
 	state: {
-		hasLogin: false,
+		hasLogin: false,
+		isUniverifyLogin: false,
 		loginProvider: "",
 		openid: null,
 		testvuex:false,
@@ -52,6 +53,10 @@ const store = new Vuex.Store({
 		},
 		setMenu(state, menu){
 			state.menu = menu
+		},
+		setUniverifyLogin(state, payload){
+			typeof payload !== 'boolean' ? payload = !!payload : '';
+			state.isUniverifyLogin = payload;
 		}
 	},
     getters:{