Аутентификация Okta с Appwrite

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

Содержание

Новичок в Appwrite? 🤔
📃 Предварительные условия
🔐 Настройка Okta OAuth
🤝 Включите Okta в Appwrite
👨💻 Реализуйте вход с помощью Okta в вашем проекте
🌐 Web
📱 Flutter
🤖 Android
🍎 Apple
🏁 Заключение
Новичок в Appwrite? 🤔

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

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

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

Вам также понадобится учетная запись Okta Developer, и если у вас ее нет, вы можете легко создать ее бесплатно, посетив okta.com/developers.

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

После того как наш проект Appwrite запущен, мы должны создать интеграцию приложений в Okta Dashboard. Как только вы окажетесь на странице Applications (под выпадающим меню Applications), просто нажмите на кнопку Create App Integration и создайте интеграцию приложения с методом входа как OIDC – OpenID Connect и типом приложения как Web Application.

Нажмите на кнопку Next, введите подходящее имя для интеграции и скопируйте URL перенаправления из диалога настройки Okta OAuth в Appwrite (перейдя к списку OAuth Providers в Users →Settings на Appwrite Dashboard), чтобы добавить его в поле Allowed sign-in redirect URIs. Обязательно установите поле Контролируемый доступ в соответствии с требованиями вашего приложения.

Вы будете перенаправлены на новую страницу интеграции приложений, где на вкладке Общие вы найдете ID клиента, Секрет клиента и Домен Okta.

🤝 Включите Okta в Appwrite

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

Кроме того, вы можете создать пользовательский сервер авторизации и добавить идентификатор пользовательского сервера авторизации в диалог настройки Okta OAuth в Appwrite вместо того, чтобы оставить его пустым для идентификатора сервера авторизации default.

👨💻 Реализуйте вход с помощью Okta в вашем проекте

После того как вы настроили учетные данные Okta OAuth в консоли Appwrite, вы готовы реализовать Okta 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(
        "okta",
        "[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 проверять полученные запросы, а также предотвращает запросы от неизвестных приложений. На странице настроек проекта нажмите на кнопку Add Platform и выберите New Flutter App. В появившемся диалоговом окне выберите подходящую платформу 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: "okta"
        );
    } 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 = "okta"
            )

        }
    }
}

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

🍎 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: "okta"
){ result in
    switch result {
    case .failure(let err):
        print(err.message)
    case .success:
        print("logged in")
    }
}

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

🏁 Заключение

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

Appwrite Docs
Appwrite Discord
Appwrite GitHub

Аутентификация Okta с Appwrite

Новичок в Appwrite? 🤔

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

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

🤝 Включите Okta в Appwrite

👨💻 Реализуйте вход с помощью Okta в вашем проекте

🌐 Web

📱 Flutter

🤖 Android

🍎 Apple

🏁 Заключение

Рекомендуем почитать: