UniApp はユーザーのログインと認可の詳細な分析を実装します

UniApp はユーザーのログインと認可の詳細な分析を実装します

現代のモバイル アプリケーション開発では、ユーザーのログインと認可は不可欠な機能です。クロスプラットフォーム開発フレームワークとして、UniApp はユーザーのログインと承認を実装する便利な方法を提供します。この記事では、UniApp でのユーザーのログインと認証の詳細を説明し、対応するコード例を添付します。

1. ユーザー ログイン機能の実装

1. ログイン ページの作成

ユーザー ログイン機能には通常、ユーザーのログイン ページが必要です。アカウント番号とパスワードを入力してログインボタンを押してください。 UniApp では、uni-app コンポーネント ライブラリによって提供されるフォーム コンポーネントを使用して、ログイン ページを作成できます。

<template>
  <view>
    <form>
      <input type="text" v-model="username" placeholder="请输入账号" />
      <input type="password" v-model="password" placeholder="请输入密码" />
      <button @click="login">登录</button>
    </form>
  </view>
</template>

2. ユーザー ログイン インターフェイス呼び出し

ユーザーがログイン ページにアカウントとパスワードを入力した後、検証のためにこの情報をサーバーに送信する必要があります。 uni.request メソッドを使用して HTTP リクエストを送信し、リクエストが成功した後にそれを適切に処理できます。

methods: {
  login() {
    uni.request({
      url: 'https://example.com/login',
      method: 'POST',
      data: {
        username: this.username,
        password: this.password
      },
      success: (res) => {
        if (res.statusCode === 200) {
          // 登录成功，保存用户信息到本地
          uni.setStorageSync('userInfo', res.data.userInfo);
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          });
          // 跳转到首页
          uni.switchTab({
            url: '/pages/home/index'
          });
        } else {
          uni.showToast({
            title: res.data.message,
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        console.error(err);
        uni.showToast({
          title: '登录失败',
          icon: 'none'
        });
      }
    });
  }
}

3. ローカル キャッシュを使用してユーザー情報を保存する

ログインに成功した後、他のページで使用できるようにユーザー情報をローカル キャッシュに保存できます。 UniApp は、データの保存と読み取りを実装するための uni.setStorageSync メソッドと uni.getStorageSync メソッドを提供します。

methods: {
  login() {
    // ...
    if (res.statusCode === 200) {
      // 登录成功，保存用户信息到本地
      uni.setStorageSync('userInfo', res.data.userInfo);
      // ...
    }
    // ...
  }
}

2. ユーザー認証機能の実装

1. WeChat ミニ プログラム ユーザー認証

WeChat ミニ プログラム プラットフォームに基づく UniApp アプリケーションの場合、ユーザー認証通常、WeChat上でユーザーのニックネームやアバターなどの基本情報を取得することを指します。 uni.getUserInfo メソッドを使用して、ユーザーの承認を要求し、許可を得た後にユーザー情報を取得できます。

uni.getUserInfo({
  success: (res) => {
    const userInfo = res.userInfo;
    uni.setStorageSync('userInfo', userInfo);
    // ...
  },
  fail: () => {
    // 授权失败的处理逻辑
  }
})

2. H5 プラットフォームのユーザー認証

H5 プラットフォームでは、navigator.geolocation などのネイティブ Web API を通じてユーザー認証を実現できます。地理位置情報の取得、navigator.getUserMediaメディア デバイスのアクセス許可の取得など。 UniApp は、現在のユーザーの認証情報を取得および設定するための uni.getSetting メソッドを提供します。

uni.getSetting({
  success: (res) => {
    if (res.authSetting['scope.userLocation']) {
      // 用户已授权获取地理位置信息
      navigator.geolocation.getCurrentPosition((position) => {
        const { latitude, longitude } = position.coords;
        // ...
      });
    } else {
      // 用户未授权获取地理位置信息
      // ...
    }
  }
})

上記のコード例を通じて、UniApp がユーザーのログインと承認機能を容易にする一連の API とコンポーネントを提供していることがわかります。 WeChat ミニ プログラム プラットフォームに基づいているか、H5 プラットフォームに基づいているかにかかわらず、UniApp は統一された便利な実装アプローチを提供できます。開発者は、UniApp が提供するインターフェイスとコンポーネントを理解するだけで、ユーザーのログインと承認の機能要件を簡単に実装できます。

以上がUniApp はユーザーのログインと認可の詳細な分析を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。