ここをクリックしてDcloud 公式 Web サイトにワンクリックでログインしてください。興味があれば、公式 Web サイトをチェックしてください。非常に詳細な例があります。アプリを選択してワンクリックでログインすると、概要が表示されます。よく使用されるもの
としては、次のようなものがあります。
1. uni.login を呼び出して、ワンクリック ログイン ページをポップアップ表示します。 2. ワンクリック ログイン プロセスでは、事前
に uni.prelogin() にログインするか、uni.login() に直接ログインするかを選択できます。
最初に Dcloud ワンクリック ログイン サービスを有効にする必要があります。Dcloud Developer Center アカウントにログインして、ワンクリック ログイン サービスを有効にします。これには支払いが必要です。各通話は 0.02 元です。リチャージ額に制限はありません。テストするには十分です。
4. uniCloud クラウド関数を設定します。ワンクリック ログインには uniCloud.getPhoneNumber() を呼び出す必要があります。
5. HBuilderX 3.4.0 以降のバージョンでクラウド関数をアップロードする場合、uni-cloud-verify 拡張ライブラリを使用するクラウド関数が指定されていない場合, uniCloud は呼び出されません。getPhoneNumber インターフェイスなので、クラウド関数の package.json に uni-cloud-verify への参照を追加します。 6.
ワンクリック ログイン ページが設定されます。設定方法は、 univerifyStyle データ構造
7. ワンクリック ログイン認証インターフェイスを閉じ、uni.closeAuthView() を呼び出します
8. ユーザーがワンクリック ログイン カスタム ボタンをクリックします
9. ワンクリック ログインが成功すると、そのデータ構造に従って判断されますアプリページに直接入るか、ビジネス処理に登録するかどうかの独自のバックエンドインターフェイス。
uni のワンクリック ログインの概要については、ここをクリックしてください。
Uni携帯電話番号でワンクリックログイン、ここをクリックしてください
ワンクリック ログインの具体的な実装:
まず、Dcloud アカウントを取得する必要があります。お申し込み後、ワンクリック ログイン サービスの有効化を申請してください。ワンクリック ログイン サービスの有効化の詳細な手順については、ここをクリックして、左側のワンクリック ログインを選択してください1. mainfest.json でアプリモジュール構成を選択し、
ワンクリックログインにチェックを入れます
。 2. ワンクリックログインを実現するには、UniCloud クラウド機能の API を使用する必要があります。 : uniCloud.getPhoneNumber.
uniCloud.getPhoneNumber クラウド関数を作成する手順は次のとおりです。
1. プロジェクトのルート ディレクトリの uniCloud フォルダーの下で、cloudfunctions フォルダーを見つけます。2. getPhoneNumberなどの
クラウド関数の名前として、cloudfunctions フォルダーに新しいフォルダーを作成します。ここでの私の名前はログインです。
3. getPhoneNumber フォルダーに移動し、index.js などの JavaScript ファイルを作成します。
4.index.jsにクラウド関数のコードを記述し、携帯電話番号を取得するロジックを実装します。
注: このコードにより、以下のエラーが発生しました。エラーは解決されました。このコードを直接コピーしないでください。解決されたコードを使用してください。
exports.main = async (event, context) => {
//登录Dcloud账号，左侧选择一键登录，点击基础配置，取ApiKey和ApiSecret的值
const res = await uniCloud.getPhoneNumber({
provider: 'univerify',
apiKey: '对应的apiKey',
apiSecret: '对应的apiSecret',
access_token: event.access_token,
openid: event.openid
})
// 这里需要改成你们自己后端登录成功后的接口地址 ...
const url = event.serversUrl + '/user/login'
// md5加密方式：手机号 时间戳 私钥
const phone = res.phoneNumber
const timestamp = new Date().getTime()
const signKey = '对应的signKey '
const sign = crypto.createHash('md5').update(phone + timestamp + signKey).digest('hex')
const result = await uniCloud.httpclient.request(url, {
method: 'POST',
data: {
phone,
timestamp,
sign
},
contentType: 'json',
dataType: 'json',
// 是否在证书不受信任时返回错误
rejectUnauthorized: false
})
console.log('服务端返回结果=', result)
if (result.data.code == 200) {
return {
code: 0,
message: '获取手机号成功',
data: result.data.data
}
} else {
return {
code: result.data.code,
message: result.data.msg,
data: result.data.data
}
}
}
5. プロジェクト ルート ディレクトリの uniCloud フォルダーで、クラウド関数の package.json に uni-cloud-verify への参照を追加して、クラウド関数に対してこの拡張機能を有効にします。その他の調整は必要ありません。
{
"name": "login",
"dependencies": {
},
"extensions": {
"uni-cloud-verify": {
} // 启用一键登录扩展，值为空对象即可
}
}
3. ページの具体的な用途
. 使い方に関しては、私自身いくつかの落とし穴を経験しました.
1. まず、ワンクリックログインページはポップアップウィンドウに似ています. アプリを最初に開くと、 -クリックするとログイン ページが表示されます。
ワンクリック ログインを選択しない場合は、左上隅の十字をクリックしてポップアップ ウィンドウを閉じます。
最初の落とし穴は、ワンクリックログインが理解できていなかったことで、
UIを基にワンクリックログインページを作成しましたが、実装の過程では、暗号化された携帯電話番号とパスワードの取得方法に常に戸惑いました。対応するサプライヤー。認証サービスはページのレンダリングに使用されます。誤解されているのは、ワンクリック ログイン ページが設定されているということです。
ポップアップウィンドウなので閉じた後に表示ページがあるはずですが、ここで表示しているのは閉じた後のアカウントログインページです。
2. uniapp の紹介で、左側のメニュー バーの [uni ワンクリック ログイン] をクリックすると、
中にフローチャートが表示されます。最初にプレログインし、次にワンクリック ログインします。
ログイン前に関しては、主にログイン前の環境を確認するために uni.preLogin() を呼び出し
てから uni.login() を呼び出す必要があり
、非常にわかりにくいです。 -click ログイン ボタン
. つまり、uni.login() はユーザーのログイン資格情報コードを取得します。このコードは、バックエンド サーバーに送信されます。サーバーは、
ログイン検証にこの資格情報を使用し、ユーザーの ID 情報を返すか、ユーザーのセッション資格情報を生成します。率直に言うと、携帯電話は
uni.login() を呼び出した後でのみ、ワンクリックログインページの番号と対応するサプライヤー認証サービス
、携帯電話番号と対応するサプライヤー認証サービスが表示され、
続いてワンクリックログインボタンが表示されます。ボタンをクリックすると、uniCloud.callFunction がトリガーされます。 , これはクラウド関数を呼び出すことです。クラウド関数によって返されるパラメータには、
ユーザーの完全な携帯電話番号が含まれています。この携帯電話番号を使用して、独自のバックエンド インターフェイスを調整し、ホームページに公開するか、公開するかを決定できます
。ユーザーは、バックエンドによって与えられた ID に基づいて登録ページに移動する必要があります。
function preLogin(isShowMsg = false) {
//预登陆检查是否符合一键登录的环境
uni.preLogin({
provider: "univerify",
success: (res) => {
//调用login方法，我是vue3，没有thi实例，vue2框架this.login()
login()
},
fail(err) {
// 如果手机没有插入有效的sim卡，或者手机蜂窝数据网络关闭，都有可能造成预登录校验失败。
if (isShowMsg && err.errMsg != "login:ok") {
// 不同运营商 返回的报错字段不同
uni.showModal({
title: "当前设备环境不支持一键登录",
content:
err.errMsg ||
err.metastate.resultMsg ||
err.metastate.error_data ||
err.metastate.resultDesc ||
"请检查是否插入有效sim卡及开启蜂窝数据网络",
showCancel: false,
});
}
},
});
}
function login() {
uni.login({
provider: 'univerify',
univerifyStyle: {
"fullScreen": true, // 是否全屏显示，true表示全屏模式，false表示非全屏模式，默认值为false。
"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
"icon": {
"path": "static/images/logo.png",// 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
"width": "60px", //图标宽度 默认值：60px
"height": "60px",//图标高度 默认值：60px,
},
"phoneNum": {
"color": "#525252",// 手机号文字颜色 默认值：#202020
"fontSize": "22",// 手机号字体大小 默认值：18
},
"slogan": {
"color": "#525252", // slogan 字体颜色 默认值：#8a8b90
"fontSize": "14"
},
"authButton": {
"normalColor": "#FF9CAE", // 授权按钮正常状态背景颜色 默认值：#3479f5
"highlightColor": "#FF9CAE", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
"title": "一键登录/注册" // 授权按钮文案 默认值：“本机号码一键登录”
},
"otherLoginButton": {
"visible": "true", // 是否显示其他登录按钮，默认值：true
"normalColor": "", // 其他登录按钮正常状态背景颜色 默认值：透明
"highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值：透明
"textColor": "#656565", // 其他登录按钮文字颜色 默认值：#656565
"title": "验证码登录", // 其他登录方式按钮文字 默认值：“其他登录方式”
"borderColor": "", //边框颜色 默认值：透明（仅iOS支持）
"borderRadius": "0px",// 其他登录按钮圆角 默认值："24px" （按钮高度的一半）
},
"privacyTerms": {
"defaultCheckBoxState": false, // 条款勾选框初始状态 默认值： true
"uncheckedImage": "", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)
"checkedImage": "", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)
"checkBoxSize": 12, // 可选 条款勾选框大小，仅android支持
"textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB
"termsColor": "#5496E3", // 协议文字颜色 默认值： #5496E3
"prefix": "请阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”
"privacyItems": [ // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
{
"url": "/pages/privacy/use", // 点击跳转的协议详情页面
"title": "《xxx用户注册协议》" //用户注册协议名称
},
{
"url": "/pages/privacy/privacy", // 点击跳转的协议详情页面
"title": "《xx隐私政策》" // 隐私政策名称
}
]
}
},
success: (res) => {
uniCloud.callFunction({
name: 'login', // 你的云函数名称
data: {
access_token: res.authResult
.access_token, // 客户端一键登录接口返回的access_token
openid: res.authResult.openid // 客户端一键登录接口返回的openid
}
}).then(dataRes => {
console.log('云函数返回的参数', dataRes)
data.form.mobile = dataRes.result.data.phoneNumber
$Api.post("user/direct",data.form).then((res) => {
console.log(res,'调后端接口判断登录后操作');
if(res&&res.code==0){
if(res.id){
uni.switchTab({
url: "/pages/square/square",
});
}else{
uni.navigateTo({
url: "/pages/user/register?mobile=" + data.form.mobile,
});
}
}
});
}).catch(err => {
console.log('云函数报错', err)
})
uni.showToast({
title: res.authResult,
icon: "none"
})
uni.closeAuthView() //关闭一键登录弹出窗口
},
fail(res) {
// 登录失败
uni.closeAuthView() //关闭一键登录弹出窗口
console.log('失败')
},
})
}
3. uni.login() 呼び出しが成功すると、ワンクリック ログイン ページが表示され、スタイルが調整されます。大きなフレームは変更できません。調整できるのはフォント サイズや色などの一部のみです。アイコンの調整方法 電話番号と電話番号の距離に今まで気づかなかったのですが、気づいた方はメッセージを残してください。
universalStyleで設定すると公式サイトはこんな感じですが、私自身の設定は上記のコードを参照してください。
{
"fullScreen": false, // 是否全屏显示，默认值： false
"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
"backgroundImage": "", // 全屏显示的背景图片，默认值："" （仅支持本地图片，只有全屏显示时支持）
"icon": {
"path": "static/xxx.png", // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
"width": "60px", //图标宽度 默认值：60px
"height": "60px" //图标高度 默认值：60px
},
"closeIcon": {
"path": "static/xxx.png" // 自定义关闭按钮，仅支持本地图片。 HBuilderX3.3.7+版本支持
},
"phoneNum": {
"color": "#202020" // 手机号文字颜色 默认值：#202020
},
"slogan": {
"color": "#BBBBBB" // slogan 字体颜色 默认值：#BBBBBB
},
"authButton": {
"normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5
"highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
"title": "本机号码一键登录", // 授权按钮文案 默认值：“本机号码一键登录”
"borderRadius": "24px" // 授权按钮圆角 默认值："24px" （按钮高度的一半）
},
"otherLoginButton": {
"visible": true, // 是否显示其他登录按钮，默认值：true
"normalColor": "", // 其他登录按钮正常状态背景颜色 默认值：透明
"highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值：透明
"textColor": "#656565", // 其他登录按钮文字颜色 默认值：#656565
"title": "其他登录方式", // 其他登录方式按钮文字 默认值：“其他登录方式”
"borderColor": "", //边框颜色 默认值：透明（仅iOS支持）
"borderRadius": "0px" // 其他登录按钮圆角 默认值："24px" （按钮高度的一半）
},
"privacyTerms": {
"defaultCheckBoxState":true, // 条款勾选框初始状态 默认值： true
"isCenterHint":false, //未勾选服务条款时点击登录按钮的提示是否居中显示 默认值: false (3.7.13+ 版本支持)
"uncheckedImage":"", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)
"checkedImage":"", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)
"checkBoxSize":12, // 可选 条款勾选框大小
"textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB
"termsColor": "#5496E3", // 协议文字颜色 默认值： #5496E3
"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”
"privacyItems": [ // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
{
"url": "https://", // 点击跳转的协议详情页面
"title": "用户服务协议" // 协议名称
}
]
},
"buttons": {
// 自定义页面下方按钮仅全屏模式生效（3.1.14+ 版本支持）
"iconWidth": "45px", // 图标宽度（高度等比例缩放） 默认值：45px
"list": [
{
"provider": "apple",
"iconPath": "/static/apple.png" // 图标路径仅支持本地图片
},
{
"provider": "weixin",
"iconPath": "/static/wechat.png" // 图标路径仅支持本地图片
}
]
}
}
ここでエラーが発生しました。クラウド関数のこのインターフェイスのプレフィックスが underfiend であるため、見つかりませんでした。クラウド関数のindex.js のコードは、以前に他の人が書いたものです。印刷した後、次のことがわかりました。イベントは 2 つのパラメーター (access_token. と openid) のみを返し、event.serversUrl パラメーターがないため、表示される未定義のコードは次
のように変更されます。
exports.main = async (event, context) => {
//登录Dcloud账号，左侧选择一键登录，点击基础配置，取ApiKey和ApiSecret的值
const res = await uniCloud.getPhoneNumber({
appid: '_xxxxA3', // 替换成自己开通一键登录的应用的DCloud appid
provider: 'univerify',
apiKey: '对应的apiKey',
apiSecret: '对应的apiSecret',
access_token: event.access_token,
openid: event.openid
})
return {
code: 0,
message: '获取手机号成功',
data:res
}
}
呼び出しが成功すると、次のようにデータ形式が返されます。
必要なのは完全な携帯電話番号だけです
。独自のページで uni.login を呼び出します。uniCloud.callFunction({}).then((dataRes=>{ console.log('クラウド関数によって返されたパラメータ', dataRes) } )) 、印刷後に取得できます。
{
"result": {
"code": 0,
"message": "获取手机号成功",
"data": {
"code": 0,
"success": true,
"phoneNumber": "1510000xxxx"
}
}
}
少し詳しく話しましょう。クラウド関数の結果を印刷して確認したい場合は、クラウド関数を右クリックして、[展開のアップロード] を選択する必要があります。そうしないと、クラウド関数は更新されません。結果が得られ、何度か試しました。そのとき初めて反応しました。
メッセージまたはプライベート メッセージを残して通信することを歓迎します~~~~