今日のモバイル インターネット時代では、さまざまなアプリケーションを使用する前にユーザーの登録とログインが必要であり、ほとんどのアプリケーションのログイン方法はアカウントとパスワードによるログインです。アカウントのパスワードは非常に安全ですが、ユーザーにとっては操作が不便で、特にモバイルデバイスのユーザーにとって、アカウントのパスワードの入力はコンピュータよりも難しくなります。
そのため、ユーザー エクスペリエンスを向上させるために、多くのアプリケーションでは携帯電話番号確認コードを使用してログインする方法が提供されています。クロスプラットフォーム開発フレームワークとして、uniapp は、開発者が携帯電話番号を使用して迅速にログインできるようにする便利なツールとコンポーネントを提供します。
uniapp が携帯電話番号認証コード ログインを実装する方法を学びましょう:
最初に、uni-app プロジェクトを作成する必要があります。 (すでにプロジェクトがある場合は、この手順をスキップできます)。プロジェクトを作成するときは、ユニアプリ テンプレートをテンプレートとして選択する必要があります。ユニアプリ テンプレートには多くの組み込みユニアプリ コンポーネントとプラグインが含まれており、迅速な開発が容易になるためです。
次に、プラグインをインストールする必要があります。幸いなことに、uni-app は、必要なプラグインを見つけることができるプラグイン マーケットを提供しています。 。この記事で使用する必要があるプラグインは、uni-app に基づく UI フレームワークである uview-ui で、さまざまな UI コンポーネントをサポートしており、ページを迅速に構築できます。
インストールするには、コマンド ラインに次のコマンドを入力するだけです:
npm install uview-ui
最初にログイン ページを設計する必要があります。ここではまず、以下に示すように、入力ボックスとログイン ボタンを含む簡単なログイン ページをデザインします。
// 在login页面中添加一个按钮 <template> ... <button>获取验证码</button> ... </template> <script> export default { data() { return { phone: '', // 存储用户输入的手机号 code: '', // 存储服务器返回的验证码 } }, methods: { // 发送验证码 sendCode() { if (!this.phone) { uni.showToast({ icon: 'none', title: '请输入手机号' }) return } if (!/^1[3456789]\d{9}$/i.test(this.phone)) { uni.showToast({ icon: 'none', title: '请输入正确的手机号' }) return } // 向服务器发送请求 uni.request({ url: 'http://localhost:8080/sendCode', method: 'POST', header: { 'Content-Type': 'application/json' }, data: { phone: this.phone }, success: (res) => { if (res.statusCode === 200) { uni.showToast({ icon: 'none', title: '验证码已发送,请注意查收' }) this.code = res.data.code // 保存验证码 } else { uni.showToast({ icon: 'none', title: '发送验证码失败,请重新发送' }) } }, fail: (err) => { console.log(err) } }) }, } } </script>
// 在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 サイトの他の関連記事を参照してください。