uniapp アプレット認証ログインプロセスについて話しましょう-uni-app-php.cn

uniapp アプレット認証ログインプロセスについて話しましょう

PHPz

リリース： 2023-04-23 17:35:28

オリジナル

6925 人が閲覧しました

モバイルインターネットの普及に伴い、小さなプログラムは人々の日常生活に欠かせないアプリケーションになりました。開発者としてミニプログラムの機能を実装する場合、ユーザー情報を取得し、必要な操作を実行するために、承認されたログインが必要になることがよくあります。この記事では、uniapp アプレットの認証ログインプロセスを紹介します。

1. ミニプログラムの承認ログインの概要

ミニプログラムの承認ログインは、ミニプログラム開発で最も一般的なシナリオの 1 つであり、対話を実現するための重要な手段の 1 つでもあります。そしてユーザーエクスペリエンス。認証ログインにより、ミニプログラムはユーザーのアバター、ニックネーム、その他の情報を取得し、よりパーソナライズされたサービスを提供できるようになります。現在、ミニプログラムにログインするには、主に WeChat 認証ログインと携帯電話番号認証ログインの 2 つの方法があります。 WeChat 認証ログインは、WeChat が提供する公式のログイン方法で、ユーザーは QR コードをスキャンして WeChat 経由でログインすることも、ミニプログラムで直接ログインを認証することもできます。携帯電話番号認証ログインでは、携帯電話番号と認証用の認証コードを入力してログインします。

2.Uniapp アプレットの認証ログインプロセス

uniapp アプレットの認証ログインプロセスには、主に次の手順が含まれます。

2.1 基本的なユーザー情報の取得

Using uniapp フレームワークの組み込み API を使用すると、ユーザーの基本情報を簡単に取得できます。次のようにしてユーザー関連の情報を取得できます。ユーザーがログインを許可すると、アプレットからユーザーのニックネームやアバターなどの情報を簡単に取得できます。

2.2 ユーザーがログインしているかどうかを確認する

必要な操作を実行する前に、ユーザーがミニプログラムにログインしていることを確認する必要があります。ユーザーのログインステータス。ローカルストレージを使用して、ユーザーがログインしているかどうかを判断できます。

uni.getUserInfo({
  success: function (res) {
    console.log(res.userInfo);
  }
});

ログイン後にコピー

2.3 サーバーにログインステータスの取得を要求する

ユーザーがログインしていないか、ログインステータスの有効期限が切れている場合は、ログインインターフェイスを介してサーバーにログインステータスを取得するように要求する必要があります。ユーザーのログインステータス。ログインインターフェイスを要求する際、uniapp が提供するログインインターフェイスを通じて一時的なログイン資格情報コードを取得する必要もあります。

//判断用户是否登录
function isLoggedIn() {
  const token = uni.getStorageSync('token');
  return token ? true : false;
}

ログイン後にコピー

2.4 認証ページに移動

ユーザーがログインしているかどうかを確認した後、ユーザーがログインしていないか、ログインステータスの有効期限が切れていることが判明した場合は、次の操作を行う必要があります。認証ページに移動し、「ログインを認証されました」に進みます。

//获取登录凭证code
uni.login({
  provider: 'weixin',
  success(loginRes) {
    const code = loginRes.code;
    //调用登录接口
    uni.request({
      url: '接口地址',
      data: {
        code: code,
      },
      success: function (res) {
        console.log('response from server', res);
        //将登录凭证存储到本地
        uni.setStorageSync('token', res.data.access_token);
      },
      fail: function (err) {
        console.log('err', err);
      }
    });
  },
  fail(err) {
    console.log('login fail', err);
  }
});

ログイン後にコピー

2.5 ログインを承認してユーザー情報を取得する

承認ページにジャンプした後、WeChat が提供する API を呼び出して、ユーザーが WeChat 承認でログインし、ユーザーの承認を取得できるようにします。情報。ユーザー情報を取得する具体的な手順は次のとおりです:

を使用してユーザーの基本情報を取得します; ユーザーの基本情報を取得した後、送信するサーバーにアクセスしてユーザー情報を登録または更新します。

//跳转到授权页面
function toAuthorizationPage(){
    uni.navigateTo({
        url: '/pages/authorize/index',
        success:function(res){
            console.log('navigate success',res);
        },
        fail:function(err){
            console.log('navigate fail',err);
        }
    })
}

ログイン後にコピー