add univerify-custom-page.uvue

pages.json

@@ -1220,6 +1220,20 @@
 				"enablePullDownRefresh": false
 			}
 		},
+    {
+    	"path": "pages/API/get-univerify-manager/univerify-custom-page",
+    	"style": {
+        "navigationBarTextStyle":"black",
+        "navigationStyle": "custom"
+    	}
+    },
+    {
+    	"path": "pages/API/get-univerify-manager/univerify-privacy-page",
+    	"style": {
+        "navigationBarTextStyle":"black",
+        "navigationStyle": "custom"
+    	}
+    },
 		// #endif
 		// #ifdef APP-ANDROID || APP-IOS || WEB || MP-WEIXIN
 		{

pages/API/get-univerify-manager/get-univerify-manager.uvue

@@ -8,6 +8,9 @@
       <view class="uni-btn-v uni-common-mt">
         <button type="primary" @click="verify(true)">一键登录（全屏）</button>
       </view>
+      <view class="uni-btn-v uni-common-mt">
+        <button type="primary" @click="customLoginIn()">一键登录（自定义页面）</button>
+      </view>
     </view>
   </view>
 </template>
@@ -17,27 +20,40 @@
     data() {
       return {
         title: '一键登录',
-        univerifyManager: null as UniverifyManager | null
+        univerifyManager: null as UniverifyManager | null,
+        phone: '',
+        slogan: '',
+        privacyName: '',
+        privacyUrl: ''
+        // phone: '176****6657',
+        // slogan: '认证服务由中国联通提供',
+        // privacyName: '中国联通认证服务条款',
+        // privacyUrl: 'https://opencloud.wostore.cn/authz/resource/html/disclaimer.html?fromsdk=true'
       }
     },
     onLoad() {
       this.univerifyManager = uni.getUniverifyManager();
       // 预登录
-      this.univerifyManager?.preLogin({
-        success: () => {
-          console.log("pre login success");
-        },
-        fail: (err : PreLoginFail) => {
-          console.error("pre login fail => " + JSON.stringify(err));
-          uni.showModal({
-            title: '预登录失败',
-            content: JSON.parseObject(err.cause?.cause?.message ?? "")?.getString("errorDesc") ?? err.errMsg,
-            showCancel: false
-          });
-        }
-      } as PreLoginOptions);
+      this.preLogin(() => { });
     },
     methods: {
+      customLoginIn() {
+        const isPreLoginValid = this.univerifyManager?.isPreLoginValid() ?? false;
+        if (isPreLoginValid) {
+          this.pushCustomPage();
+        } else {
+          this.preLogin(() => {
+            this.pushCustomPage();
+          })
+        }
+      },
+      pushCustomPage() {
+        const url = '/pages/API/get-univerify-manager/univerify-custom-page?phone=' + this.phone + '&slogan=' + this.slogan + '&name=' + this.privacyName + '&link=' + this.privacyUrl;
+        uni.navigateTo({
+          url: url,
+          animationType: "slide-in-bottom",
+        })
+      },
       verify(fullScreen : boolean) {
         // 校验预登录是否有效
         const isPreLoginValid = this.univerifyManager?.isPreLoginValid() ?? false;
@@ -46,72 +62,84 @@
           this.login(fullScreen);
         } else {
           // 预登录无效，执行预登录
-          this.univerifyManager?.preLogin({
-            success: () => {
-              console.log("pre login success");
-              this.login(fullScreen);
-            },
-            fail: (err : PreLoginFail) => {
-              console.error("pre login fail => " + JSON.stringify(err));
-              uni.showModal({
-                title: '预登录失败',
-                content: JSON.parseObject(err.cause?.cause?.message ?? "")?.getString("errorDesc") ?? err.errMsg,
-                showCancel: false
-              });
-            }
-          } as PreLoginOptions);
+          this.preLogin(() => {
+            this.login(fullScreen);
+          })
         }
       },
-      login(fullScreen : boolean) {
-        this.univerifyManager?.login({
-          // 登录页样式
-          univerifyStyle: {
-            fullScreen: fullScreen,
-            backgroundColor: "#FFFFFF",
-            loginBtnText: "一键登录",
-            logoPath: "/static/logo.png"
-          } as UniverifyStyle,
-          success: (res : LoginSuccess) => {
-            console.log("login success => " + JSON.stringify(res));
-            // 云函数取号
-            uniCloud.callFunction({
-              name: 'univerify',
-              data: {
-                access_token: res.accessToken, // 客户端一键登录接口返回的access_token
-                openid: res.openId // 客户端一键登录接口返回的openid
-              }
-            }).then(res => {
-              // 关闭登录页
-              this.univerifyManager?.close();
-              setTimeout(() => {
-                uni.showModal({
-                  title: '取号成功',
-                  content: res.result.getJSON("res")?.getString("phoneNumber"),
-                  showCancel: false
-                });
-              }, 100);
-            }).catch(err => {
-              console.error(JSON.stringify(err));
-              // 关闭登录页
-              this.univerifyManager?.close();
-              setTimeout(() => {
-                uni.showModal({
-                  title: '取号失败',
-                  content: (err as Error).message,
-                  showCancel: false
-                });
-              }, 100);
-            });
+      preLogin(callback) {
+        this.univerifyManager?.preLogin({
+          success: (res) => {
+            this.phone = res.number;
+            this.slogan = res.slogan;
+            this.privacyName = res.privacyName;
+            this.privacyUrl = res.privacyUrl;
+            console.log("pre login success");
+            callback();
           },
-          fail: (err : LoginFail) => {
-            console.error("login fail => " + err);
+          fail: (err : PreLoginFail) => {
+            console.error("pre login fail => " + JSON.stringify(err));
             uni.showModal({
-              title: '登录失败',
+              title: '预登录失败',
               content: JSON.parseObject(err.cause?.cause?.message ?? "")?.getString("errorDesc") ?? err.errMsg,
               showCancel: false
             });
           }
-        } as LoginOptions);
+        } as PreLoginOptions);
+      },
+      login(fullScreen : boolean) {
+        this.univerifyManager?.login({
+          univerifyStyle:{
+            fullScreen: fullScreen,
+            backgroundColor: "#FFFFFF",
+            loginBtnText: "一键登录",
+            logoPath: "/static/logo.png"
+          },
+          success: (res : LoginSuccess) => {
+            console.log("login success => " + JSON.stringify(res));
+            this.takePhoneNumber(res.accessToken,res.openId);
+          },
+          fail: (err : LoginFail) => {
+            console.error("login fail => " + err);
+            uni.showModal({
+              title: '登录失败',
+              content: JSON.parseObject(err.cause?.cause?.message ?? "")?.getString("errorDesc") ?? err.errMsg,
+              showCancel: false
+            });
+          }
+        });
+      },
+      takePhoneNumber(accessToken : string, openId : string) {
+        // 云函数取号
+        uniCloud.callFunction({
+          name: 'univerify',
+          data: {
+            access_token: accessToken, // 客户端一键登录接口返回的access_token
+            openid: openId // 客户端一键登录接口返回的openid
+          }
+        }).then(res => {
+          // 关闭登录页
+          this.univerifyManager?.close();
+          setTimeout(() => {
+            uni.showModal({
+              title: '取号成功',
+              content: res.result.getJSON("res")?.getString("phoneNumber"),
+              showCancel: false
+            });
+          }, 100);
+        }).catch(err => {
+          console.error(JSON.stringify(err));
+          // 关闭登录页
+          this.univerifyManager?.close();
+          setTimeout(() => {
+            uni.showModal({
+              title: '取号失败',
+              content: (err as Error).message,
+              showCancel: false
+            });
+          }, 100);
+        });
+
       }
     }
   }
@@ -119,4 +147,4 @@
 
 <style>
 
-</style>
+</style>/style>

pages/API/get-univerify-manager/univerify-custom-page.uvue

+<template>
+  <view class="container">
+    <view class="safe_content">
+      <text class="close_icon" @click="closePage">{{closeIcon}}</text>
+      <text class="title">登录后 体验完整功能</text>
+      <view class="number">
+        <text id="number-text" class="number-text" ref="number-text">{{phone}}</text>
+        <text id="slogan-text" class="slogan-text">{{slogan}}</text>
+      </view>
+      <button id="login-button" class="login-button" @click="loginIn">本机号码一键登录</button>
+      <view class="privacy">
+        <checkbox id="privacy-checkbox" class="privacy-checkbox" ref="privacy-checkbox" :checked="true"></checkbox>
+        <text class="privacy-normal-text">已阅读并同意</text>
+        <text id="privacy-text" class="privacy-text" @click="openLink">{{privacyName}}</text>
+      </view>
+      <text class="other" @click="otherLogin">其他登录方式</text>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        univerifyManager: null as UniverifyManager | null,
+        phone: '',
+        slogan: '',
+        privacyName: '',
+        privacyUrl: '',
+        closeIcon: '\uE650'
+      }
+    },
+    onLoad(options : OnLoadOptions) {
+      this.univerifyManager = uni.getUniverifyManager();
+      this.phone = options['phone'] as string;
+      this.slogan = options['slogan'] as string;
+      this.privacyName = options['name'] as string;
+      this.privacyUrl = options['link'] as string;
+    },
+    methods: {
+      closePage() {
+        uni.navigateBack()
+      },
+      openLink() {
+        let url = '/pages/API/get-univerify-manager/univerify-privacy-page?url=' + this.privacyUrl;
+        uni.openDialogPage({
+          url: url,
+          animationType: 'slide-in-bottom',
+          success(res) {
+            console.log("打开隐私协议");
+          },
+          fail(err) {
+            console.log(err);
+          }
+        })
+
+      },
+      loginIn() {
+        const numberTextElement = uni.getElementById('number-text');
+        const sloganTextElement = uni.getElementById('slogan-text');
+        const loginButtonElement = uni.getElementById('login-button');
+        const privacyCheckBoxElement = uni.getElementById('privacy-checkbox');
+        const privacyTextElement = uni.getElementById('privacy-text');
+
+        this.univerifyManager?.customLogin({
+          numberTextElement: numberTextElement!,
+          sloganTextElement: sloganTextElement!,
+          loginButtonElement: loginButtonElement!,
+          privacyCheckBoxElement: privacyCheckBoxElement!,
+          privacyTextElement: privacyTextElement!,
+          success: (res : LoginSuccess) => {
+            console.log(res);
+            this.takePhoneNumber(res.accessToken, res.openId);
+          },
+          fail: (error : LoginFail) => {
+            console.error("login fail => " + error);
+            uni.showModal({
+              title: '登录失败',
+              content: JSON.parseObject(error.cause?.cause?.message ?? "")?.getString("errorDesc") ?? error.errMsg,
+              showCancel: false
+            });
+          }
+        })
+      },
+      takePhoneNumber(token : string, openId : string) {
+        //云函数取号
+        uniCloud.callFunction({
+          name: 'univerify',
+          data: {
+            access_token: token, // 客户端一键登录接口返回的access_token
+            openid: openId // 客户端一键登录接口返回的openid
+          }
+        }).then(res => {
+          // 关闭登录页
+          this.closePage();
+          setTimeout(() => {
+            uni.showModal({
+              title: '取号成功',
+              content: res.result.getJSON("res")?.getString("phoneNumber"),
+              showCancel: false
+            });
+          }, 100);
+        }).catch(err => {
+          console.error(JSON.stringify(err));
+          // 关闭登录页
+          this.closePage();
+          setTimeout(() => {
+            uni.showModal({
+              title: '取号失败',
+              content: (err as Error).message,
+              showCancel: false
+            });
+          }, 100);
+        });
+      },
+      otherLogin() {
+        //此处可实现其他登录方式
+        uni.showToast({
+          title: "使用其他方式登录"
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+  .container {
+    background-color: white;
+    flex: 1;
+    width: 100%;
+  }
+
+  .safe_content {
+    padding-top: var(--status-bar-height);
+    width: 100%;
+    height: 100%;
+  }
+
+  .close_icon {
+    left: 90%;
+    top: 15px;
+    font-family: uni-icon;
+    font-size: 24px;
+  }
+
+  .title {
+    font-size: 20px;
+    align-self: center;
+    font-weight: bold;
+    top: 20px;
+  }
+
+  .number {
+    width: 100%;
+    top: 25%;
+    position: absolute;
+    height: 120px;
+  }
+
+  .number-text {
+    width: 100%;
+    text-align: center;
+    font-size: 28px;
+    font-weight: bold;
+    align-self: center;
+    height: 30px;
+  }
+
+  .slogan-text {
+    margin-top: 10px;
+    width: 100%;
+    font-size: 13px;
+    text-align: center;
+    align-self: center;
+    color: gray;
+    height: 20px;
+  }
+
+  .login-button {
+    width: 80%;
+    top: 40%;
+    position: absolute;
+    align-self: center;
+    background-color: orangered;
+    font-size: 16px;
+    color: white;
+  }
+
+  .privacy {
+    margin-top: 5px;
+    margin-left: 5px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    top: 45%;
+    width: 80%;
+    justify-content: center;
+    position: absolute;
+  }
+
+  .privacy-checkbox {
+    transform: scale(0.65);
+  }
+
+  .privacy-text {
+    margin-top: 4px;
+    color: #2785ff;
+    font-size: 14px;
+  }
+
+  .privacy-normal-text {
+    margin-top: 4px;
+    color: gray;
+    font-size: 14px;
+  }
+
+  .other {
+    bottom: 7%;
+    transform: translateY(50%);
+    position: absolute;
+    align-self: center;
+    font-size: 14px;
+  }
+</style>

pages/API/get-univerify-manager/univerify-privacy-page.uvue

+<template>
+	<view class="background">
+    <view class="top_container" @click="onBack()">
+
+    </view>
+		<view class="container">
+			<web-view class="web" :src="url">
+
+			</web-view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				url: '',
+				backIcon:'\uE601'
+			}
+		},
+		onLoad(options : OnLoadOptions) {
+			this.url = options["url"] as string;
+		},
+		methods: {
+			onBack(){
+				uni.closeDialogPage({
+				  dialogPage: this.$page,
+				  animationType:'slide-out-bottom',
+				  success(res) {
+				    console.log('closeThisDialog success', res)
+
+				  },
+				  fail(err) {
+				    console.log('closeThisDialog fail', err)
+				  }
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.background {
+		background-color: rgba(0, 0, 0, 0.3);
+		width: 100%;
+		height: 100%;
+	}
+  .top_container{
+    width: 100%;
+    height: 20%;
+  }
+	.container{
+    color: white;
+    bottom: 0;
+    width: 100%;
+    position: absolute;
+    height: 80%;
+	}
+	.backArrow{
+		margin-left: 4px;
+		font-family: uni-icon;
+		font-size: 30px;
+		width: 50px;
+		height: 50px;
+	}
+	.web{
+		height: 100%;
+		width: 100%;
+	}
+
+</style>