[uniapp アプレットにより、認可されたユーザーは直接自動的にログインでき、認可されていないユーザーは認可ページを表示してワンクリック ログインを実現します]

uniapp アプレットを使用すると、認可されたユーザーは直接かつ自動的にログインでき、認可されていないユーザーは認可ページを表示してワンクリック ログインを実現できます。


序文

项目背景 :
このプロジェクトは、uniapp を使用して実装されたマルチ端末アプレットであり、現時点では、WeChat アプレットと Alipay アプレットのログイン機能要件が実現されており、現在のユーザーが許可していれば、サイレントに自動的にログインし、ホームページにジャンプします
。サイレント ログイン プロセスでは、ユーザーはログイン ページが表示されます。現在のユーザーが初めて使用する場合は、ログイン ページが表示されます。ユーザーが [認証] をクリックした後、ログインが実行されます。


以下是自己实现前端的思路以及流程图 , 经验尚浅 , 欢迎指正交流 , 代码就不方便放了哈哈哈哈

1. 実装アイデア

妊娠を始めた時は色々な計画を考えましたが、

1. バックエンドインターフェース

バックエンドインターフェイスは 3 つあります。以下は当社が開発して使用しているインターフェイスのみです

a.コードによるログイン

このインターフェイスで必要なパラメータは、uni.login によって返されるコード値です。バックエンドは、コード値を使用して openid を交換します。openid はユーザーの一意の識別子です。openid をデータベースに取得して、ユーザーが存在するかどうかを確認します。存在する場合はユーザー オブジェクトを返します。存在しない場合はバインドされていないユーザーを返します。

b. ログインMpAli

これは、Alipay のワンクリック ログイン インターフェイスです。必須パラメータは、ユーザーが認証後に取得する情報
パラメータ
です。パラメータには、encryptedData、sign、authCode が含まれます (もちろん、実際のプロジェクトには他のビジネス パラメータもありますが、それらはこのうち
、最初の 2 つのパラメータ encryptedData と signed は、my.getPhoneNumber メソッドを通じてアプレットによって取得された authCode です。
アプレットは、my.getAuthCode('auth_base を通じて取得されます) ') メソッド、サイレント メソッドを使用、ユーザーに承認を求めるプロンプトを表示しない、サンプル値 (単語)

const {
    
    
	authCode: loginCode
} = await getAuthCode('auth_base');
const encryptedData = e.detail.encryptedData
const sign = e.detail.sign

関数を実現した後、
バックエンドはパラメータを取得してユーザーが許可した携帯電話番号を復号化し、携帯電話番号に基づいてデータベース内のユーザーを照会し、ユーザーが見つかった場合はユーザー オブジェクトを返します。見つからなかった場合は登録が実行され、登録は成功します。ユーザー オブジェクトを返した後、

c. ログインMpWx

これは WeChat のワンクリック ログイン インターフェイスです。必須パラメータは、認証後にユーザーが取得する情報
パラメータ
コードです。これは、my.getPhoneNumber メソッドを通じてアプレットによって取得されます。

const code = e.detail.code

実装機能はAlipayのワンクリックログインと同じですが、WeChatとAlipayでは携帯電話番号の復号方法や必要なデータが異なるため、ここで渡すパラメータが異なります。

2 番目に、最終的な実装フローチャート

1. フローチャート

ここに画像の説明を挿入

要約する

WeChat と Alipay アプレットは同じ携帯電話番号を使用できます。つまり、同じ携帯電話番号は WeChat ログイン アプレットと Alipay ログイン アプレットを使用して同じアカウントに入力するため、ここでは携帯電話番号が一意の番号として使用されます。ユーザーが照会されない場合は、復号化された携帯電話番号を照会条件として使用して登録を実行し、コードに交換された OpenID を照会条件として使用して、ユーザーが照会されない場合はバインディング操作を実行します。

データベース内のユーザーのフィールドには、少なくともユーザー ( weixin_openid 、 alipay_openid 、電話番号 ) およびビジネス フィールドが含まれます。

上記のアイデアはあくまでも自分自身で実現するための方法です。ご不明な点がございましたら、お気軽に質問して、一緒に議論し、一緒に進めてください〜実装方法は大雑把で未熟かもしれません。より良いアイデアがあれば、大歓迎
です一緒にコミュニケーションをとるために!

おすすめ

転載: blog.csdn.net/YZRHANYU/article/details/131108679