Аутентификация Auth0 в Appwrite

В течение долгого времени Appwrite поддерживал обширный список внешних провайдеров аутентификации, чтобы наши разработчики могли уменьшить трение для своих пользователей и дать им свободу работать с платформами, которые им нравятся. С недавним выпуском Appwrite 0.14 мы добавили 3 новых провайдера аутентификации, одним из которых стал Auth0. Давайте сейчас узнаем, как мы можем настроить аутентификацию Auth0 в наших приложениях с помощью Appwrite.

Новичок в Appwrite? 🤔

Appwrite — это back-end-as-a-service с открытым исходным кодом, который абстрагирует все сложности создания современных приложений, предоставляя набор REST и Realtime API для ваших основных потребностей back-end. Appwrite берет на себя всю тяжесть работы для разработчиков и занимается аутентификацией и авторизацией пользователей, базами данных, хранением файлов, облачными функциями, веб-крючками и многим другим!

📃 Предварительные условия

Чтобы следовать этому руководству, вам понадобится доступ к проекту Appwrite или права на его создание. Если у вас еще не запущен сервер Appwrite, следуйте официальному руководству по его установке. После создания проекта в консоли Appwrite вы можете перейти в раздел Пользователи → Настройки, чтобы найти список поддерживаемых провайдеров OAuth2. Здесь мы установим провайдера Auth0 OAuth.

Вам также понадобится учетная запись Auth0, и если у вас ее нет, вы можете легко создать ее бесплатно на сайте auth0.com.

🔐 Настройка Auth0 OAuth

После того как наш проект Appwrite запущен, мы должны создать приложение в Auth0 Dashboard. Как только вы окажетесь на странице Applications, просто нажмите на кнопку Create и создайте приложение с подходящим названием с типом Regular Web Applications.

Вы будете перенаправлены на страницу вашего нового приложения, где на вкладке Настройки вы можете найти Auth0 Домен, ID клиента и Секрет клиента.

🤝 Включение Auth0 в Appwrite

Зайдите в Пользователи → Настройки на панели Appwrite и включите провайдера Auth0 OAuth. Вам будет предложено ввести Client ID, Client Secret и Auth0 Domain из предыдущего шага. Скопируйте их со страницы вашего приложения Auth0 и вставьте в диалог настройки OAuth в Appwrite.

Скопируйте URL перенаправления из диалога настройки Auth0 OAuth в Appwrite и вставьте его в Разрешенные URL обратного вызова на вкладке Настройки на странице вашего приложения Auth0.

👨💻 Внедрение входа с помощью Auth0 в вашем проекте

После того как вы настроили учетные данные Auth0 OAuth в консоли Appwrite, вы готовы реализовать Auth0 Sign In в своем проекте. Давайте посмотрим, как это можно сделать на различных платформах.

Вы можете использовать наши клиентские SDK для различных платформ для аутентификации пользователей с помощью провайдеров OAuth2. Прежде чем вы сможете проводить аутентификацию, вам необходимо добавить наш SDK в качестве зависимости и настроить его с помощью конечной точки и идентификатора проекта. Чтобы научиться настраивать наши SDK, вы можете следовать руководству по началу работы для каждой платформы. Соответствующие ссылки приведены в каждом разделе ниже. После того как SDK настроен, вы можете инстанцировать и вызвать службу учетных записей для создания сессии от провайдера OAuth2. Ниже приведены примеры для разных платформ для инициализации клиентов и выполнения входа по OAuth2.

🌐 Web

Сначала вам нужно добавить веб-платформу в ваш проект из консоли Appwrite. Добавление веб-платформы позволяет Appwrite проверять полученные запросы, а также предотвращает кросс-оригинальные ошибки в веб. На странице настроек проекта нажмите на кнопку Add Platform и выберите New Web App. В появившемся диалоговом окне дайте платформе узнаваемое имя и добавьте имя хоста вашего приложения.

Следуйте руководству Getting Started for Web для получения подробных инструкций по использованию Appwrite с вашим веб-приложением.

const appwrite = new Appwrite();

appwrite
  .setEndpoint('[YOUR_END_POINT]')
  .setProject('[YOUR_PROJECT_ID]');

try {
    await appwrite.account.createOAuth2Session(
        "auth0",
        "[YOUR_END_POINT]/auth/oauth2/success",
        "[YOUR_END_POINT]/auth/oauth2/failure",
    );
} catch (error) {
    throw error;
}
Вход в полноэкранный режим Выход из полноэкранного режима

📱 Flutter

Для Flutter в Android, чтобы правильно обрабатывать перенаправление пользователей обратно в ваше мобильное приложение после завершения потока OAuth, вам нужно установить следующее в вашем файле AndroidManifest.xml.

<manifest ...>
  ...
  <application ...>
    ...
    <!-- Add this inside the `<application>` tag, alongside the existing `<activity>` tags -->
    <activity android:name="com.linusu.flutter_web_auth.CallbackActivity" android:exported="true">
      <intent-filter android:label="flutter_web_auth">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="appwrite-callback-[YOUR_PROJECT_ID]" />
      </intent-filter>
    </activity>
  </application>
</manifest>
Войти в полноэкранный режим Выйти из полноэкранного режима

Вам также необходимо добавить платформу Flutter в ваш проект из консоли Appwrite. Добавление платформы Flutter позволяет Appwrite проверять получаемые запросы, а также предотвращает запросы от неизвестных приложений. На странице настроек проекта нажмите на кнопку Добавить платформу и выберите Новое приложение Flutter. В появившемся диалоговом окне выберите подходящую платформу Flutter, дайте платформе узнаваемое имя и добавьте идентификатор приложения или имя пакета в зависимости от платформы. Вам необходимо выполнить этот шаг для каждой платформы Flutter, для которой вы будете создавать свое приложение.

Для получения более подробных инструкций по началу работы с Appwrite для разработчиков Flutter следуйте нашему официальному руководству Getting Started for Flutter. Наконец, вы можете вызвать account.createOAuth2Session из вашего приложения, как показано ниже.

import 'package:appwrite/appwrite.dart';

void main() async {
    final client = new Client();

    client
    .setEndpoint('[YOUR_END_POINT]')
    .setProject('[YOUR_PROJECT_ID]');

    final account = Account(client);

    try {
        await account.createOAuth2Session(
            provider: "auth0"
        );
    } catch (error) {
        throw error;
    }
}
Вход в полноэкранный режим Выход из полноэкранного режима

🤖 Android

Для Android, чтобы правильно обрабатывать перенаправление пользователей обратно в мобильное приложение после завершения потока OAuth, вам необходимо установить следующее в файле AndroidManifest.xml.

<manifest ...>
  ...
  <application ...>
    ...
    <!-- Add this inside the `<application>` tag, alongside the existing `<activity>` tags -->
    <activity android:name="io.appwrite.views.CallbackActivity" android:exported="true">
      <intent-filter android:label="android_web_auth">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="appwrite-callback-[YOUR_PROJECT_ID]" />
      </intent-filter>
    </activity>
  </application>
</manifest>
Войти в полноэкранный режим Выйти из полноэкранного режима

Вам также необходимо добавить платформу Android в ваш проект из консоли Appwrite. Добавление платформы Android позволяет Appwrite проверять полученные запросы, а также предотвращает запросы от неизвестных приложений. На странице настроек проекта нажмите на кнопку Add Platform и выберите New Android App. В появившемся диалоговом окне дайте платформе узнаваемое имя и добавьте имя пакета вашего приложения.

Для получения более подробных инструкций по началу работы с Appwrite для разработчиков Android следуйте нашему официальному руководству Getting Started for Android. Наконец, вы можете вызвать account.createOAuth2Session из вашего приложения, как показано ниже.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.launch
import io.appwrite.Client
import io.appwrite.services.Account

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val client = Client(applicationContext)
            .setEndpoint("[YOUR_ENDPOINT]") // Your API Endpoint
            .setProject("[YOUR_PROJECT_ID") // Your project ID

        val account = Account(client)

        GlobalScope.launch {
            account.createOAuth2Session(
                activity = this@MainActivity,
                provider = "auth0"
            )

        }
    }
}
Вход в полноэкранный режим Выход из полноэкранного режима

🍎 Apple

Для захвата URL-адреса обратного вызова Appwrite OAuth необходимо добавить следующую схему URL-адреса в ваш Info.plist.

<key>CFBundleURLTypes</key>
<array>
<dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>io.appwrite</string>
    <key>CFBundleURLSchemes</key>
    <array>
        <string>appwrite-callback-[YOUR_PROJECT_ID]</string>
    </array>
</dict>
</array>
Вход в полноэкранный режим Выход из полноэкранного режима

Вам также необходимо добавить платформу Apple в ваш проект из консоли Appwrite. Добавление платформ Apple позволяет Appwrite проверять полученные запросы, а также предотвращает запросы от неизвестных приложений. На странице настроек проекта нажмите на кнопку Добавить платформу и выберите Новое приложение Apple. В появившемся диалоговом окне выберите соответствующую вкладку платформы Apple, дайте вашей платформе узнаваемое имя и добавьте имя пакета вашего приложения. Для каждой поддерживаемой платформы Apple необходимо выполнить этот процесс.

Для получения более подробных инструкций по началу работы с Appwrite для разработчиков iOS следуйте нашему официальному руководству Getting Started for Apple. Наконец, вы можете вызвать account.createOAuth2Session из вашего приложения, как показано ниже.

import Appwrite

let client = Client()
    .setEndpoint("[YOUR_ENDPOINT]")
    .setProject("[YOUR_PROJECT_ID]")

let account = Account(client)

account.createOAuth2Session(
    provider: "auth0"
){ result in
    switch result {
    case .failure(let err):
        print(err.message)
    case .success:
        print("logged in")
    }
}
Вход в полноэкранный режим Выход из полноэкранного режима

🏁 Заключение

Вот и все, что требуется для реализации аутентификации на основе Auth0 OAuth с помощью Appwrite. Если вы хотите глубже изучить Appwrite, вы можете просмотреть следующие ресурсы:

  • Appwrite Docs
  • Appwrite Discord
  • Appwrite GitHub

Оцените статью
Procodings.ru
Добавить комментарий