uniappで携帯電話番号ログインを実装する方法

今日のモバイル インターネット時代では、さまざまなアプリケーションを使用する前にユーザーの登録とログインが必要であり、ほとんどのアプリケーションのログイン方法はアカウントとパスワードによるログインです。アカウントのパスワードは非常に安全ですが、ユーザーにとっては操作が不便で、特にモバイルデバイスのユーザーにとって、アカウントのパスワードの入力はコンピュータよりも難しくなります。

そのため、ユーザー エクスペリエンスを向上させるために、多くのアプリケーションでは携帯電話番号確認コードを使用してログインする方法が提供されています。クロスプラットフォーム開発フレームワークとして、uniapp は、開発者が携帯電話番号を使用して迅速にログインできるようにする便利なツールとコンポーネントを提供します。

uniapp が携帯電話番号認証コード ログインを実装する方法を学びましょう:

ステップ 1: uni-app プロジェクトを作成する

最初に、uni-app プロジェクトを作成する必要があります。 (すでにプロジェクトがある場合は、この手順をスキップできます)。プロジェクトを作成するときは、ユニアプリ テンプレートをテンプレートとして選択する必要があります。ユニアプリ テンプレートには多くの組み込みユニアプリ コンポーネントとプラグインが含まれており、迅速な開発が容易になるためです。

ステップ 2: プラグインをインストールする

次に、プラグインをインストールする必要があります。幸いなことに、uni-app は、必要なプラグインを見つけることができるプラグイン マーケットを提供しています。 。この記事で使用する必要があるプラグインは、uni-app に基づく UI フレームワークである uview-ui で、さまざまな UI コンポーネントをサポートしており、ページを迅速に構築できます。

インストールするには、コマンド ラインに次のコマンドを入力するだけです:

npm install uview-ui

ステップ 3: ログイン ページを設計する

最初にログイン ページを設計する必要があります。ここではまず、以下に示すように、入力ボックスとログイン ボタンを含む簡単なログイン ページをデザインします。

ステップ 4: 確認コードを送信します。ユーザーが携帯電話番号を入力した後、「認証コードを取得」ボタンをクリックしてサーバーに認証コードを要求します。この機能を実装するには、いくつかの手順があります:

1. サーバーは携帯電話番号に確認コードを送信します。
2. クライアント (アプリケーション) は受信します。確認コードをローカルに保存します。

3. // 在login页面中添加一个按钮
   <template>
     ...
     <button>获取验证码</button>
     ...
   </template>
   
   <script>
     export default {
       data() {
         return {
           phone: &#39;&#39;, // 存储用户输入的手机号
           code: &#39;&#39;, // 存储服务器返回的验证码
         }
       },
       methods: {
         // 发送验证码
         sendCode() {
           if (!this.phone) {
             uni.showToast({
               icon: &#39;none&#39;,
               title: &#39;请输入手机号&#39;
             })
             return
           }
           if (!/^1[3456789]\d{9}$/i.test(this.phone)) {
             uni.showToast({
               icon: &#39;none&#39;,
               title: &#39;请输入正确的手机号&#39;
             })
             return
           }
           // 向服务器发送请求
           uni.request({
             url: &#39;http://localhost:8080/sendCode&#39;,
             method: &#39;POST&#39;,
             header: {
               &#39;Content-Type&#39;: &#39;application/json&#39;
             },
             data: {
               phone: this.phone
             },
             success: (res) => {
               if (res.statusCode === 200) {
                 uni.showToast({
                   icon: &#39;none&#39;,
                   title: &#39;验证码已发送，请注意查收&#39;
                 })
                 this.code = res.data.code // 保存验证码
               } else {
                 uni.showToast({
                   icon: &#39;none&#39;,
                   title: &#39;发送验证码失败，请重新发送&#39;
                 })
               }
             },
             fail: (err) => {
               console.log(err)
             }
           })
         },
       }
     }
   </script>

   ログイン後にコピー
ステップ 5: ログイン
4. ユーザーが携帯電話番号と確認コードを入力した後、「ログイン」ボタンをクリックすると、サーバーにログを記録するリクエストを送信する必要があります。携帯電話番号と検証コードが正しい場合、サーバーは認証コードを返します。このコードは、サーバーのインターフェイスにアクセスするために使用する必要があります。

ページをパブリックに使用するには、コードの値をグローバル変数に保存する必要があります。ここでは、Vuex を使用してそれを保存します:

// 在store/index.js文件中新增一个state
export default new Vuex.Store({
  state: {
    code: '', // 存储验证码
  }
  ...
})

次に、ログに記録されたファイルにコードを追加します。ユーザー情報:

// 用户信息
const userInfo = {
  phone: this.phone,
  code: this.$store.state.code
}

ログインに成功すると、認証コードをローカル キャッシュまたは Cookie に保存できます:

// 保存授权信息
uni.setStorageSync('token', res.data.token) // 将token保存到本地

// 获取授权信息
uni.getStorageSync('token') // 获取本地保存的token

最後に、クライアントによって保存されたトークンを使用してアクセスできます。サーバーの他のインターフェイスはさらに操作を完了します。

この時点で、uniapp に携帯電話番号ログインを実装するためのすべての手順が完了しました。プロセス全体は、ログイン ページの設計、確認コードの送信、ログインの 3 つの部分で構成されます。この記事がuniappの携帯電話番号でログインする方法をマスターする一助になれば幸いです。

以上がuniappで携帯電話番号ログインを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。