استفد من توسيع Chrome الخاص بك بواسطة مصادقة OpenID Connect (OAuth 2.0)

ملحقات Chrome هي وسيلة رائعة لتمديد فاعلية متصفح Chrome. عندما يكون لديك ملحق شهير، قد ترغب في الاستفادة منه من خلال تقديم ميزات احترافية للمستخدمين الذين يدفعون مقابلها. المصادقة ضرورية لهذا الغرض:

• هوية المستخدم: تحتاج إلى معرفة هوية المستخدم لتقديم ميزات مخصصة.
• التحكم في الوصول: تحتاج إلى التحكم في من يمكنه الوصول إلى الميزات المدفوعة.
• إدارة الاشتراكات: تحتاج إلى توفير وسيلة للمستخدمين للاشتراك وإدارة اشتراكاتهم.

من ناحية أخرى، لا نريد الالتزام بنظام حساب Google، حيث قد يفضل المستخدمون استخدام حسابات أخرى، أو قد يكون لديك خدمات متعددة ترغب في دمجها مع نفس نظام الهوية.

ملخص سريع لفوائد استخدام OpenID Connect (OIDC) للمصادقة:

• عدم قفل البائع: يمكن للمستخدمين استخدام طرق متنوعة لتسجيل الدخول، بدلاً من الجبر على Google.
• تسجيل الدخول الواحد (SSO): يمكن للمستخدمين تسجيل الدخول مرة واحدة والوصول إلى خدمات أو تطبيقات متعددة.
• معياري: OIDC هو معيار مفتوح يتم اعتماده ودعمه بشكل واسع، وهو آمن أيضًا.

في هذا الدليل، سنستخدم Logto كمزود لخدمة OIDC، وهو بديل لـ Auth0 لبناء هياكل الهوية.

لنبدا!

مقدمة#

على افتراض أنك وضعت زر "تسجيل الدخول" في نافذة البوب أب لملحق Chrome الخاص بك، ستبدو عملية المصادقة كما يلي:

لبقية الصفحات التفاعلية في الملحق، فقط تحتاج إلى استبدال مشارك نافذة البوب أب للملحق باسم الصفحة. في هذا الدليل، سنركز على صفحة البوب أب.

إنشاء تطبيق Logto#

لبدء العمل، أنشئ تطبيق Logto بنوع "تطبيق صفحة واحدة". اتبع هذه الخطوات:

1. سجل الدخول إلى كونسول Logto.
2. اضغط على Create application.
3. في الصفحة المفتوحة، ابحث عن زر "Create app without framework" في الأسفل واضغط عليه.
4. اختر نوع "تطبيق صفحة واحدة"، وأدخل اسم تطبيقك.
5. اضغط على Create.

إعداد ملحق Chrome الخاص بك#

تثبيت Logto SDK#

قم بتثبيت Logto SDK في مشروع ملحق Chrome الخاص بك:

تحديث manifest.json#

يتطلب Logto SDK الأذونات التالية في manifest.json:

• permissions.identity: مطلوب لواجهة API هوية Chrome، التي تُستخدم لتسجيل الدخول وتسجيل الخروج.
• permissions.storage: مطلوب لتخزين جلسة المستخدم.
• host_permissions: مطلوب لاتصال Logto SDK بواجهات Logto API.

إعداد سكريبت الخلفية (خدمة عامل)#

في سكريبت الخلفية لملحق Chrome الخاص بك، قم بتهيئة Logto SDK:

استبدل <your-logto-endpoint> و <your-logto-app-id> بالقيم الفعلية. يمكنك العثور على هذه القيم في صفحة التطبيق التي أنشأتها للتو في كونسول Logto.

إذا لم يكن لديك سكريبت خلفي، يمكنك اتباع الدليل الرسمي لإنشاء واحد.

بعد ذلك، نحتاج للاستماع إلى الرسائل من الصفحات الأخرى للملحق والتعامل مع عملية المصادقة:

قد تلاحظ أن هناك عنواني توجيه استخدما في الشيفرة أعلاه. كلاهما تم إنشاؤه بواسطة chrome.identity.getRedirectURL، وهو واجهة برمجة تطبيقات Chrome المدمجة لإنشاء عنوان توجيه لتدفقات المصادقة. العنوانين سيكونان:

• https://<extension-id>.chromiumapp.org/callback لتسجيل الدخول.
• https://<extension-id>.chromiumapp.org/ لتسجيل الخروج.

يرجى ملاحظة أن هذه العناوين غير قابلة للوصول، وهي تُستخدم فقط لتحفيز Chrome لاتخاذ إجراءات محددة في عملية المصادقة.

تحديث إعدادات تطبيق Logto#

الآن نحتاج إلى تحديث إعدادات تطبيق Logto للسماح لعناوين التوجيه التي أنشأناها للتو.

1. انتقل إلى صفحة التطبيق في كونسول Logto.
2. في قسم "عناوين التوجيه"، أضف العنوان: https://<extension-id>.chromiumapp.org/callback.
3. في قسم "عناوين التوجيه بعد تسجيل الخروج"، أضف العنوان: https://<extension-id>.chromiumapp.org/.
4. في قسم "الأصول المسموح بها عبر CORS"، أضف العنوان: chrome-extension://<extension-id>. سوف يستخدم SDK في ملحق Chrome هذا الأصل للتواصل مع واجهات Logto API.
5. اضغط على حفظ التغييرات.

تذكر استبدال <extension-id> بمعرف الملحق الفعلي الخاص بك. يمكنك العثور على معرف الملحق في صفحة chrome://extensions.

بعد تحديث الإعدادات، يجب أن تبدو إعدادات تطبيق Logto الخاصة بك كما يلي:

إضافة أزرار تسجيل الدخول وتسجيل الخروج إلى نافذة البوب أب#

نحن تقريبا هناك! لنقم بإضافة أزرار تسجيل الدخول وتسجيل الخروج والمنطق اللازم إلى صفحة البوب أب.

في ملف popup.html:

في ملف popup.js (افتراضًا أن popup.js تم تضمينه في popup.html):

نقطة تفتيش: اختبار عملية المصادقة#

الآن يمكنك اختبار عملية المصادقة في ملحق Chrome الخاص بك:

1. افتح نافذة البوب أب للملحق.
2. اضغط على زر "تسجيل الدخول".
3. سيتم توجيهك إلى صفحة تسجيل الدخول في Logto.
4. قم بتسجيل الدخول باستخدام حساب Logto الخاص بك.
5. سيتم توجيهك مجددًا إلى Chrome.

التحقق من حالة المصادقة#

نظرًا لأن Chrome يوفر واجهات تخزين موحدة، بصرف النظر عن تدفقات تسجيل الدخول وتسجيل الخروج، يمكن استخدام جميع طرق Logto SDK الأخرى في صفحة البوب أب مباشرةً.

في popup.js الخاص بك، يمكنك إعادة استخدام مثيل LogtoClient الذي تم إنشاؤه في سكريبت الخلفية، أو إنشاء واحد جديد بنفس التكوين:

ثم يمكنك إنشاء وظيفة لتحميل حالة المصادقة وملف تعريف المستخدم:

يمكنك أيضًا دمج وظيفة loadAuthenticationState مع منطق تسجيل الدخول وتسجيل الخروج:

إليك مثال على صفحة البوب أب مع حالة المصادقة:

لمزيد من المعلومات حول SDK، يمكنك الرجوع إلى التوثيق الرسمي لـ SDK المتصفح. SDK المتصفح يشارك نفس واجهات API مع SDK ملحق Chrome.

اعتبارات أخرى#

• تجميع خدمة العامل: إذا كنت تستخدم مجمعًا مثل Webpack أو Rollup، تحتاج إلى تعيين الهدف بوضوح إلى browser أو ما شابه لتجنب التجميع غير الضروري لوحدات Node.js.
• حل الوحدات: Logto SDK لملحق Chrome هو وحدة ESM فقط.

راجع مشروعنا النموذجي للحصول على مثال كامل مع TypeScript، Rollup والإعدادات الأخرى.

الاستنتاج#

مع تسجيل المستخدمين، يمكنك الآن تقديم ميزات مدفوعة بأمان في ملحق Chrome الخاص بك. على سبيل المثال، يمكنك تخزين حالة اشتراك المستخدم في ملف التعريف والتحقق منها عند فتح المستخدم للملحق.

بدمج قوة ملحقات Chrome وLogto، يمكنك بناء ملحق أكثر مرونة وتخصيصًا يلبي احتياجاتك واحتياجات المستخدمين.