電話身份驗證是移動應(yīng)用程序最可靠的身份驗證方法之一耽梅。Appwrite 現(xiàn)在在我們最近的版本中引入了電話身份驗證。在本文中诊胞，我們將學(xué)習(xí)如何在我們的 Flutter 應(yīng)用程序中實現(xiàn) Appwrite 的手機(jī)認(rèn)證庸队。

Appwrite 刁卜？

Appwrite是一種開源后端即服務(wù)软瞎，它通過為您的核心后端需求提供一組 REST 和實時 API逢唤，抽象出構(gòu)建現(xiàn)代應(yīng)用程序的所有復(fù)雜性。Appwrite 最大限度地減少了開發(fā)人員的繁重工作涤浇，并處理用戶身份驗證和授權(quán)鳖藕、數(shù)據(jù)庫、文件存儲只锭、云功能吊奢、webhook 等等！

先決條件

• 訪問 Appwrite 項目或創(chuàng)建項目的權(quán)限。如果您還沒有運(yùn)行 Appwrite 服務(wù)器页滚，請按照官方安裝教程獲取設(shè)置說明。
• 一個Flutter配置的開發(fā)機(jī)器铺呵。

Twilio 帳戶設(shè)置

我們首先需要設(shè)置一個電話服務(wù)提供商進(jìn)行身份驗證裹驰。Twilio 是一種流行的選擇——Twilio 帳戶可以提供 API 訪問密鑰，允許 Appwrite 將代碼發(fā)送到手機(jī)片挂。如果您沒有現(xiàn)有的 Twilio 帳戶幻林，您可以訪問https://www.twilio.com/try-twilio并使用您的電子郵件和密碼創(chuàng)建一個免費(fèi)帳戶。通過電子郵件音念，您將收到一個驗證鏈接沪饺，單擊該鏈接將驗證您的 Twilio 帳戶。它還會要求您驗證您的電話號碼闷愤。

輸入您的電話號碼整葡，然后單擊“驗證”按鈕。然后讥脐，您將通過 SMS 收到一個代碼遭居。在 Twilio 中輸入收到的代碼，然后單擊提交以確認(rèn)您的號碼旬渠。

在下一個屏幕上俱萍，輸入您的選擇。您選擇哪種編碼語言并不重要告丢，因為我們會將 Twilio 與 Appwrite 集成枪蘑，因此我們不必直接與 Twilio 交互。接下來岖免，單擊開始使用 Twilio按鈕岳颇。

然后，您應(yīng)該被重定向到 Twilio 控制臺觅捆。單擊獲取您的 Twilio 號碼按鈕赦役。初始試用帳戶只能向您已驗證的號碼發(fā)送短信和電話，并且對于測試而言栅炒，這是完美的掂摔。但是，對于生產(chǎn)用途赢赊，您必須升級您的 Twilio 帳戶乙漓。

您可以在控制臺中看到 Account SID、Auth Token 和 Phone number释移。在下一個會話中叭披，您將需要這些將 Twillio 設(shè)置為 Appwrite 可以使用的 SMS 提供程序。您的 Twilio 帳戶現(xiàn)在應(yīng)該已準(zhǔn)備好與 Appwrite 集成玩讳。

應(yīng)用程序設(shè)置

按照官方指南設(shè)置和運(yùn)行 Appwrite涩蜘。為了讓 Appwrite 了解 Appwrite嚼贡，我們需要.env從您安裝 Appwrite 的 appwrite 目錄打開文件，并更新以下環(huán)境變量同诫。

_APP_PHONE_PROVIDER=phone://<ACCOUNT SID>:<AUTH TOKEN>@twilio
_APP_PHONE_FROM=<TWILIO_PHONE_NUMBER>

更新環(huán)境變量后粤策，從包含.env和docker-compose.yml文件的安裝目錄中的命令行運(yùn)行以下命令。

docker-compose up -d

這將重新啟動容器误窖，為環(huán)境變量提供新值叮盘，因此 Appwrite 可以連接到 Twilio。我們現(xiàn)在準(zhǔn)備在我們的應(yīng)用程序中實現(xiàn)電話身份驗證霹俺。

安裝和配置 Appwrite 的 Flutter SDK

克隆我們?yōu)楸窘坛虅?chuàng)建的項目讓我們跳過設(shè)置和 UI 部分柔吼，并專注于主要主題”螅克隆https://github.com/lohanidamodar/appwrite_phone_auth.git愈魏。克隆后艇棕，在您最喜歡的 IDE 中打開它蝌戒。

我們將從添加 Appwrite 的 SDK 作為依賴項開始。打開pubspec.yaml文件沼琉，在依賴項下添加 Appwrite 的 SDK北苟。

dependencies:
    appwrite: ^6.0.0

如果 IDE 沒有自動獲取依賴項，請從終端運(yùn)行以下命令打瘪。

flutter pub get

接下來友鼻，打開lib/providers/app_state.dart文件。這是我們將配置我們的 Appwrite SDK 的地方闺骚。首先彩扔，導(dǎo)入appwrite包。

import 'package:appwrite/appwrite.dart';
import 'package:appwrite/models.dart'; // Response type definitions

在 AuthState 類中僻爽，添加新屬性虫碉。

class AuthState extends ChangeNotifier {
  final _client = Client();
  late final Account  _account;
}

然后在構(gòu)造函數(shù)中，讓我們配置客戶端并實例化帳戶胸梆。

  AuthState() {
    _client.setEndpoint('YOUR_ENDPOINT')
       .setProject(‘YOUR_PROJECT_ID’);
    _account = Account(client);
  }

安裝和配置 SDK 后敦捧，最后一步是將平臺添加到我們的 Appwrite 項目中。打開 Appwrite 控制臺并選擇您為此應(yīng)用程序創(chuàng)建的項目碰镜。您可以在項目主頁上找到添加平臺按鈕兢卵。點擊Add Platform按鈕并選擇New Flutter App。在出現(xiàn)的對話框中绪颖，選擇合適的 Flutter 平臺秽荤，為其指定一個可識別的名稱，并根據(jù)平臺添加應(yīng)用程序 ID 或包名稱。您必須為您在應(yīng)用程序中構(gòu)建的每個 Flutter 平臺完成此步驟窃款。

現(xiàn)在我們的 SDK 已經(jīng)安裝和配置好了课兄，我們準(zhǔn)備在我們的應(yīng)用程序中實現(xiàn)電話身份驗證。

使用電話創(chuàng)建會話

為具有電話號碼的用戶創(chuàng)建有效會話需要兩個步驟雁乡。首先第喳，要啟動會話創(chuàng)建過程，我們將使用設(shè)置提供程序向提供的電話號碼發(fā)送驗證碼踱稍。接下來，驗證碼將確認(rèn)并為用戶創(chuàng)建一個有效的會話悠抹。所以讓我們在我們的AuthState類中實現(xiàn)這兩個方法珠月。

要啟動會話，我們createPhoneSession從帳戶服務(wù)調(diào)用并傳遞userId電話號碼和電話號碼楔敌。傳遞'unique()'asuserId允許 Appwrite 生成唯一的 Id啤挎。

  Future<bool> createSession(String phone) async {
    try {
      final token =
          await _account.createPhoneSession(userId: 'unique()', number: phone);
      userId = token.userId;
      return true;
    } on AppwriteException catch (e) {
      _error = e.message ?? e.toString();
      isLoggedIn = false;
      notifyListeners();
      return false;
    }
  }

調(diào)用createPhoneSession返回一個帶有 的令牌對象userId。我們保存 是userId因為我們需要它來確認(rèn)身份驗證并創(chuàng)建有效會話卵凑。為此庆聘，我們需要updatePhoneSession從帳戶服務(wù)調(diào)用。讓我們按照confirmSession方法勺卢。

Future<bool> confirmSession(String secret) async {
    if (userId.isEmpty) {
      _error = 'userId not known, call `createSession` first to get userId';
      notifyListeners();
      return false;
    }
    try {
      await _account.updatePhoneSession(userId: userId, secret: secret);
      await getAccount();
      return true;
    } on AppwriteException catch (e) {
      _error = e.message ?? e.toString();
      isLoggedIn = false;
      return false;
    }
  }

現(xiàn)在讓我們在適當(dāng)?shù)?UI 中調(diào)用這些方法伙判。打開lib/login.dart并找到登錄按鈕。在按鈕的onPressed動作中黑忱，勾選后添加如下代碼宴抚。

final success = await ref
  .read(AuthState.provider.notifier)
  .createSession(_phoneController.text);
if (!mounted) return;
if (success) {
  Navigator.pushNamed(context, '/verify');
}

打開lib/verify_phone.dart并找到驗證按鈕。在按鈕的onPressed動作中甫煞，勾選后添加如下代碼菇曲。

final loggedIn = await ref
    .read(AuthState.provider.notifier)
    .confirmSession(currentText);
if (!mounted) return;
if (loggedIn) {
  Navigator.pushReplacementNamed(context, '/');
} else {
  ScaffoldMessenger.of(context).showSnackBar(SnackBar(
    content: Text(ref.read(AuthState.provider).error),
  ));
}

在這里，我們使用 SMS 中收到的代碼調(diào)用 Appwrite抚吠。我們需要做的最后一件事是——我們需要打電話來獲得一個帳戶常潮。打開lib/providers/app_state.dart并添加以下功能。

  Future<bool> getAccount() async {
    try {
      user = await _account.get();
      isLoggedIn = true;
      notifyListeners();
      return true;
    } on AppwriteException catch (e) {
      _error = e.message ?? e.toString();
      isLoggedIn = false;
      user = null;
      notifyListeners();
      return false;
    }
  }

在 的構(gòu)造函數(shù)中調(diào)用這個函數(shù)AuthState楷力，所以當(dāng)應(yīng)用程序啟動時喊式，它會檢查我們是否已經(jīng)有一個有效的會話。您現(xiàn)在可以運(yùn)行應(yīng)用程序并查看手機(jī)身份驗證的實際效果弥雹。

結(jié)論

這就是使用 Appwrite 設(shè)置電話身份驗證是多么容易垃帅。

我整理了一份flutter相關(guān)學(xué)習(xí)文檔，大家如不嫌棄剪勿，可拿去做參考文檔學(xué)習(xí)↓↓↓

有需要的可以復(fù)制下方鏈接贸诚，傳送直達(dá)！！酱固！
https://docs.qq.com/doc/DQkN3SnpnZVdoZkVv