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

モバイル インターネットの普及に伴い、小さなプログラムは人々の日常生活に欠かせないアプリケーションになりました。開発者としてミニ プログラムの機能を実装する場合、ユーザー情報を取得し、必要な操作を実行するために、承認されたログインが必要になることがよくあります。この記事では、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 承認でログインし、ユーザーの承認を取得できるようにします。情報。ユーザー情報を取得する具体的な手順は次のとおりです:

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

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

3. 概要

認証ログインは Uniapp アプレット開発の中核機能であり、ユーザー インタラクションとエクスペリエンスを実現するための重要な手段です。この記事で紹介する認証ログイン プロセスは、ミニ プログラムの参考となるため、認証ログイン機能の実装が容易になります。もちろん、この記事の長さは限られているため、承認されたログイン機能に関して考慮すべき詳細はまだ多くありますが、開発者は引き続き調査し、具体的な実践方法を実践することをお勧めします。

以上がuniapp アプレット認証ログイン プロセスについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。