نحوه به دست آوردن یک نشانه شناسه OIDC برای SpacetImedB با استفاده از Next.js و Auth0

سلام! از آنجا که اولین ویدیوی SpacetImedB منتشر شد ، من به یک طرفدار عظیم این فناوری تبدیل شده ام و برای انتشار بانک اطلاعاتی بسیار سپاسگزارم. از روز اول ، من در پروژه های خود با SpacetImedB آزمایش کردم. من راهنمای ساخت یک گپ ساده را دنبال کردم و سپس تصمیم گرفتم از SpacetImedB در یکی از پروژه های خودم استفاده کنم: بیش از حد ، یک کلیک و رای گیری روزمره. این پروژه به عنوان یک ایده سرگرم کننده آغاز شد ، اما فهمیدم که این یک روش عالی برای آزمایش پایگاه داده و یادگیری نحوه استفاده از آن برای ایده های آینده من است.

چالش احراز هویت در SpacetImedB

مستندات Spacetime بیشتر بر سناریوهای استفاده متمرکز است. نحوه ساخت یک گپ یا یک بازی کوچک به سبک Agar.io ؛ اما این مثالها به طور عمیق تأیید اعتبار و مجوز را پوشش نمی دهند. برای موارد استفاده MMORPG (جایی که SpacetImedB واقعاً می درخشد) ، Auth قوی بسیار مهم است. SpacetImedB هیچ مکانیسم مجوز داخلی را ارائه نمی دهد ، و برای تأیید اعتبار انتظار دارد که یک شناسه شناسه صادر شده توسط یک ارائه دهنده سازگار با Connect OpenID صادر شود. در عمل ، این بدان معنی است که ما توسعه دهندگان باید جریان AUTH خود را پیاده سازی کرده و از یک ارائه دهنده OIDC شخص ثالث یک نشانه بدست آوریم.

برای پروژه خود ، Auth0 را انتخاب کردم و از Next.js در جلوی آن استفاده می کنم. توجه داشته باشید که برنامه ما در اصل یک برنامه تک صفحه ای (SPA) است ، نه یک برنامه MPA یا سرور. من هنوز با سناریوی Auth طرف سرور مقابله نکرده ام.

پیش نیازهای

• یک نمونه در حال اجرا SpacetImedB با کد ماژول و منطق پایگاه داده خود در حال حاضر تنظیم شده است
• یک حساب کاربری Auth0 با یک برنامه تک صفحه پیکربندی شده
• یک مشتری Frontend (من از Next.js استفاده می کنم ، اما هر چارچوب آبگرم کار خواهد کرد)

مرحله 1: مشتری و ماژول SpacetImedB خود را تنظیم کنید

برای زبان مورد نظر خود از QuickStarts رسمی پیروی کنید:

مفاهیم کلیدی برای درک

قبل از اجرای جریان ، این نکات را در خاطر داشته باشید:

1. نشانه و هویت: نشانه ای که شما به SpacetImedB ارائه می دهید ، به آن می دهد که هویت مشتری را اختصاص داده و ادامه دهد. به عبارت ساده: همان توکن کاربر همیشه هویت SpacetImedB را به دست می آورد. این هسته اصلی چگونگی پایداری اتصالات است.

2. فقط نشان می دهد: spacetimedb به طور خاص به نشانه شناسه (نه نشانه دسترسی یا هر نشانه دیگری) که توسط یک ارائه دهنده OIDC صادر شده است ، نیاز دارد.

3. سازگاری ارائه دهنده: هر ارائه دهنده AUTH به طور کامل OIDC را پیاده سازی نمی کند. همیشه سازگاری OIDC را برای ارائه دهنده انتخاب شده خود تأیید کنید. Auth0 کاملاً سازگار با OIDC است.

4. خدمات AUTH: یک جمع کننده احراز هویت مانند AUTH0 می تواند از چندین ارائه دهنده هویت (Google ، Twitter و غیره) پشتیبانی کند. همچنین می توانید یک ارائه دهنده مانند Google را مستقیماً ادغام کنید ، اما استفاده از یک جمع کننده اغلب انعطاف پذیری بیشتری را برای کاربران خود ارائه می دهد.

اجرای آبگرم

برای برنامه های React/Next.js ، توصیه می کنم از Rect-OIDC-Context استفاده کنید. برای سایر چارچوب های TypeScript ، OIDC-Client-TS به خوبی کار می کند.

پیکربندی OIDC برای Auth0

export const oidcConfig = {
  authority: "https://dev-aaaaAAAAAAAaaaa.us.auth0.com", // Your Auth0 OIDC issuer URL in app it will be Domain
  client_id: "AAaaaAAAAaaaaaAAAAaAa",                 // Your Auth0 Client ID
  redirect_uri: "http://localhost:3001/callback",     // Redirect URI to receive the tokens
  post_logout_redirect_uri: "http://localhost:3001",   // Where to go after logout
  response_type: "code",                              // Use Authorization Code Flow
  scope: "openid email profile",                     // OIDC scopes (openid required)
};

راه اندازی ارائه دهنده ساده در Next.js

import { AuthProvider } from 'react-oidc-context';

export function Providers({ children }) {
  return <AuthProvider {...oidcConfig}>{children}</AuthProvider>;
}

اتصال به spacetimedb با نشانه شناسه

import { useAuth } from 'react-oidc-context';
import { useEffect, useState } from 'react';
import { DbConnection } from '@module-bingings'; // generated module bindings

function SpacetimeConnector() {
  const auth = useAuth();
  const [identity, setIdentity] = useState(null);

  useEffect(() => {
    if (auth.isAuthenticated && auth.user.id_token) {
      const conn = DbConnection.builder()
        .withUri('spacetime://my-project.spacetimedb.net')
        .withModuleName('my_module')
        .withToken(auth.user.id_token)
        .onConnect((conn, identity) => {
          console.log(`Connected with identity: ${identity}`);
          setIdentity(identity);
        })
        .build();

      return () => conn.close();
    }
  }, [auth.isAuthenticated, auth.user]);

  return (
    <div>
      {identity && <p>Your SpacetimeDB Identity: {identity}</p>}
    </div>
  );
}

نشانه های موقت و تأیید تنظیمات خود

spacetimedb نشانه های موقت

در onConnect استدلال سوم Callback یک نشانه موقت SpacetImedB است اگر شما یک توکن شناسه را از طریق آن تهیه نکردید .withToken()بشر spacetimedb این خودکشی را صادر می کند. اگر به Auth خارجی احتیاج دارید ، می توانید با خیال راحت نشانه موقت را نادیده بگیرید.

نشانه های موقت هنگامی که سیستم AUTH خارجی ندارید ، مفید هستند اما هنوز هم می خواهید پشت سر هم جلسه:

// Without external auth (using the temporary SpacetimeDB token)
.onConnect((conn, identity, tempToken) => {
  console.log(`Connected with identity: ${identity}`);
  localStorage.setItem('spacetime_temp_token', tempToken);
})

// With OIDC ID Token
.onConnect((conn, identity, _tempToken) => {
  console.log(`Connected with identity: ${identity}`);
  // We ignore the temporary token when using an OIDC ID Token
})

نحوه تأیید پیکربندی خود

اطمینان حاصل کنید که همان کاربر معتبر همیشه هویت SpacetImedB را دریافت می کند:

1. وارد برنامه خود شوید.
2. به SpacetImedB وصل شوید و هویت برگشتی را یادداشت کنید.
3. صفحه را تازه کنید یا برنامه را در یک مرورگر متفاوت باز کنید.
4. به همان کاربر وارد شوید.
5. بررسی کنید که هویت بدون تغییر باقی می ماند.

.onConnect((conn, identity, tempToken) => {
  console.log(`Connected with identity: ${identity}`);
  // This identity should be stable for a single user
})

اگر هویت برای همان کاربر متفاوت است ، بررسی کنید:

• شما در حال ارسال یک نشانه شناسه OIDC هستید (یک نشانه دسترسی نیست).
• تنظیمات ارائه دهنده OIDC شما صحیح است.
• شما در حال ادامه و استفاده مجدد از نشانه ها هستید.

پایان

من با سیستم های تأیید اعتبار و مجوز تجربه بسیار محدودی داشتم و OIDC برای من کاملاً جدید بود. در ابتدا ، ادغام آن بسیار زیاد بود و من مطمئن نبودم که چه کاری انجام می دهم. اکنون با انجام مراحل کار ، می توانم ببینم که در واقع کاملاً قابل دسترسی است.

با تشکر فراوان از Lethalchip (Chip) برای مثال GitHub خود (SpacetImedB-Cookbook/OIDC-Test). توجه: اگرچه مثال او به طور کلی صحیح است ، اما او به اشتباه از یک نشانه دسترسی به جای یک نشانه شناسه استفاده می کند ، که باعث ثبات هویت در تست های من شد.

امیدوارم این راهنما به شما کمک کند تا با یک سیستم تأیید اعتبار OIDC از طریق AUTH0 یا سایر ارائه دهنده شکایت OIDC ، SpacetImedB را در پروژه های خود ادغام کنید.