كيفية إعداد المصادقة للمستخدم مع Devise في تطبيق Rails 7

اختار الكاتب Girls Who Code لتلقي تبرع كجزء من برنامج Write for DOnations.

المقدمة

تعتبر حزمة Devise حلاً للمصادقة في تطبيقات Ruby on Rails؛ حيث تساعدك في إعداد مصادقة المستخدمين الجاهزة للإنتاج في مشاريعك دون الحاجة إلى القيام بكل شيء بمفردك. توفر Devise العديد من الميزات المفيدة مثل التعامل مع جلسات المستخدم وإضافة دعم لتسجيل الدخول من خلال الطرف الثالث باستخدام OAuth باستخدام حزمة OmniAuth. كما تأتي Devise أيضًا مع وحدات مدمجة للوظائف مثل إعادة تعيين كلمات المرور المنسية، وتتبع عدد تسجيل الدخول والطوابع الزمنية، وتحديد فترات زمنية، وقفل الحسابات، وما إلى ذلك.

تجعل Devise مصادقة المستخدم بسيطة من خلال تهيئة الحزمة وإنشاء نموذج User بالميزات المطلوبة. إذا كنت ترغب في بناء مصادقة المستخدمين من البداية، فستحتاج إلى كتابة الشفرة واختبارات لجميع الميزات التي ترغب فيها، ومعالجة جميع الحالات الحدودية في التعامل مع الجلسات، وتخزين ملفات تعريف الارتباط، والحفاظ على البيانات بأمان. من خلال استخدام حزمة Devise، تتجنب القيام بكل ذلك بنفسك ويمكنك التركيز على بناء تطبيقك بدلاً من ذلك.

في هذا البرنامج التعليمي، ستقوم بإنشاء تطبيق ويب أساسي باستخدام Rails وتثبيت Devise، الذي سيتيح للمستخدمين إنشاء حسابات، وتسجيل الدخول، وتسجيل الخروج من حساباتهم.

المتطلبات الأولية

لإكمال هذا البرنامج التعليمي، ستحتاج إلى:

• A local development environment for Ruby on Rails. For Linux, you can follow our tutorial How To Install Ruby on Rails with rvm on Ubuntu 20.04 or use the rvm product docs for installing on Mac or Windows. You can also refer to the Ruby project docs to install Ruby directly in your system. To install the Rails gem, you can use the official Rails documentation. The Devise gem requires Ruby version 2.1.0 or greater; this tutorial was tested using Ruby version 3.0.2 and Rails version 7.0.3.
• Node.js مثبتًا على جهازك. بعض ميزات Rails، مثل الأنبوبة النقلية، تعتمد على وحدة تشغيل JavaScript. يوفر Node.js هذه الوظيفة. لـ Ubuntu، قم بتثبيت Node.js باستخدام PPA الرسمي، كما هو موضح في الخيار 2 من كيفية تثبيت Node.js على Ubuntu 20.04. بالنسبة لنظام Mac OS، اتبع دليلنا كيفية تثبيت Node.js وإنشاء بيئة تطوير محلية على MacOS.
• الاستمرارية مع Ruby وإطار عمل Ruby on Rails. يمكنك التحقق من الدروس الأولى من سلسلة الدروس الخاصة بنا Rails on Containers، أو يمكنك استخدام Rails Guides الرسمية.

الخطوة 1 — إنشاء تطبيق Rails جديد

في هذه الخطوة، ستقوم بإنشاء تطبيق Rails جديد وتشغيله محليًا على جهازك. ستستخدم أداة سطر الأوامر rails لتهيئة المشروع.

قم بتشغيل الأمر التالي من الطرفية:

rails new blog

سينشئ الأمر rails new مشروعًا Rails جديدًا تحت الدليل blog، والذي يتضمن عددًا من الملفات والمجلدات المولدة. أحدها هو ملف Gemfile، الذي يحتوي على تبعيات المشروع. ستقوم بتكوين ملف Gemfile لاستخدام Devise في الخطوة 3 — تثبيت وتكوين Devise.

يمكنك فتح هذا الدليل في محرر النص المفضل لديك أو التنقل إليه باستخدام الطرفية:

cd blog

لبدء تشغيل تطبيق Rails، ابدأ خادم التطوير باستخدام الأمر rails server من دليل المشروع:

bundle exec rails server

هذا الأمر سيبدأ خادم تطوير Rails. قم بفتح http://localhost:3000 في متصفحك للوصول إلى صفحة الترحيب بـ Rails. تستخدم Rails منفذ 3000 لتشغيل التطبيق إذا لم تقم بتوفير رقم منفذ بديل.

لقد قمت الآن بتهيئة تطبيق Rails جديد، الذي ستضيف له مصادقة المستخدم في خطوة لاحقة. في الخطوة التالية، ستقوم بتبديل الصفحة الرئيسية الافتراضية التي يوفرها Rails بصفحة هبوط مخصصة، مما سيجعل من السهل التنقل من خلال التطبيق التجريبي بمجرد إضافة Devise. بعد إنشاء صفحة هبوط جديدة، ستقوم بإضافة روابط للمستخدم للتسجيل وتسجيل الدخول إلى التطبيق.

الخطوة 2 — إنشاء صفحة هبوط

الآن بعد أن لديك تطبيق Rails أساسي، ستقوم بتبديل الصفحة الافتراضية التي يوفرها Rails بصفحة هبوط خاصة بك. ستجعل الصفحة الرئيسية المخصصة من السهل عرض روابط للمستخدم للتسجيل وتسجيل الدخول على عنوان URL الجذري للتطبيق. ستقوم بإضافة روابط للتسجيل وتسجيل الدخول في الخطوات اللاحقة.

لإنشاء صفحتك الرئيسية، ستحتاج إلى القيام بالخطوات التالية:

• أضف المسار في ملف config/routes.rb.
• أنشئ HomeController الذي سيتعامل مع الطلبات إلى هذا المسار.
• أنشئ ملف عرض ليتم عرضه عندما تصل إلى المسار.

ستبدأ بإضافة المسار الجذري إلى ملف routes.rb الذي تم إنشاؤه عند إنشاء المشروع.

باستخدام nano أو محرر النص المفضل لديك، افتح ملف config/routes.rb الذي تم إنشاؤه سابقًا:

nano config/routes.rb

أضف السطر المميز:

Rails.application.routes.draw do
  root to: "home#index" 
end

root to: يحدد أي إجراء في التحكم سيتعامل مع الطلبات إلى المسار الجذري — في هذه الحالة، سيكون المسار http://localhost:3000، وهو المنفذ الافتراضي لتطبيقات Rails. ستتم معالجة الطلبات إلى هذا المسار بواسطة إجراء index في تحكم home. هذا الملف لا يوجد الآن، لذا ستقوم بإنشاء ملف app/controllers/home_controller.rb بعد ذلك.

احفظ وأغلق config/routes.rb. باستخدام nano، اضغط CTRL+X للخروج، Y للحفظ، و ENTER لتأكيد اسم الملف وإغلاق الملف.

بعد ذلك، أنشئ ملف app/controllers/home_controller.rb وأضف الأسطر التالية:

class HomeController < ApplicationController
  def index
    render
  end
end

هذا هو HomeController الأساسي مع طريقة index التي تقوم بشيء واحد: عرض ملف العرض المرتبط بإجراء التحكم.

في هذه الحالة، سيكون ملف العرض هو ملف app/views/home/index.html.erb. ستحتاج إلى إنشاء هذا الملف بالإضافة إلى دليل home داخل دليل app/views.

احفظ وأغلق ملف تحكم home.

بعد ذلك، قم بإنشاء دليل home في دليل app/views:

mkdir app/views/home/

سيحتوي دليل home على جميع العروض لتحكم معين في Rails.

ثم، قم بإنشاء ملف app/views/home/index.html.erb وأضف السطور التالية:

<h1>Hello DigitalOcean!</h1>

app/views/home/index.html.erb هو ملف العرض الذي سيقوم الإجراء index في تحكم Home بتقديمه. هذا ملف HTML حيث يمكنك تضمين رمز Ruby. عندما يتم تشغيل المسار المحدد لإجراء التحكم المعين، يتم تقديم ملف العرض هذا في متصفح المستخدم.

احفظ وأغلق ملفك.

لرؤية التغييرات في عنوان URL الجذر، افتح http://localhost:3000 في متصفحك (أو قم بتحديث الصفحة إذا كانت مفتوحة بالفعل). ستكون الصفحة الرئيسية المحدثة مماثلة لهذه:

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

الآن بمجرد أن لديك تطبيق بسيط في Rails مع صفحة رئيسية خاصة به، ستقوم بإضافة مصادقة المستخدم باستخدام حجر الأساس.

الخطوة 3 — تثبيت وتكوين Devise

في هذه الخطوة، ستقوم بتثبيت وتكوين Devise في تطبيق Rails الخاص بك بحيث يمكنك استخدام الطرق والمساعدين الذين يأتون مع الجوهرة. ستستخدم الطريقة user_signed_in؟ للتحقق من معلومات الجلسة لأي مستخدم قام بتسجيل الدخول والتي تم تخزينها في ملفات تعريف الارتباط في المستعرض. ستستخدم أيضًا المساعد current_user للحصول على تفاصيل الحساب الذي قام بتسجيل الدخول حاليًا. تأتي كلا الطريقتين مدمجتين في Devise ويمكنك استخدامهما مباشرة في تطبيقك دون الحاجة إلى كتابة كود إضافي. يمكنك معرفة المزيد حول هذه الطرق المساعدة من صفحة GitHub لمشروع Devise.

الخطوة الأولى لتثبيت Devise هي إضافة الجوهرة إلى ملف Gemfile الخاص بك، والذي يحتوي على معلومات عن جميع التبعيات اللازمة لتشغيل مشروعك بـ Ruby. في هذه الحالة، عندما تقوم بتهيئة تطبيق Rails، يحتوي ملف Gemfile المولد بالفعل على جميع الجواهر الأساسية المطلوبة لتشغيل Rails.

ولكن قبل إجراء تغييرات على ملف Gemfile الخاص بك، قم بإيقاف خادم التطوير الذي بدأته في الخطوة السابقة عن طريق الضغط على CTRL+C في الطرفية حيث يعمل.

ثم، قم بفتح ملف Gemfile الخاص بك للتعديل. لإضافة جوهرة Devise، أضف السطر المظلل نحو نهاية الملف، ولكن خارج مجموعات development و test:

# ...

# يقلل من أوقات التمهيد من خلال التخزين المؤقت؛ مطلوب في config/boot.rb
gem "bootsnap", require: false

# استخدم Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

gem "devise" 

group :development, :test do
  # انظر https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
end

# ...

قم بحفظ وإغلاق ملفك.

بعد ذلك، ستقوم بتثبيت الجم المضاف حديثًا عن طريق تشغيل أمر bundle install في الطرفية. من دليل مشروعك (blog)، قم بتشغيل الأمر التالي:

bundle install

سيقوم هذا الأمر بتثبيت جم Devise في مشروعك، مما سيتيح لك استخدام أمر devise مع أداة سطر الأوامر rails وتكوين المصادقة.

لتهيئة Devise في مشروعك، قم بتشغيل أمر المولد:

bundle exec rails g devise:install

يوجد العلم g في الأمر أعلاه للأمر generate ويستخدم لاستدعاء مولدات Rails. ستقوم المولدات بإنشاء ملفات يمكن أن تكون نقطة بداية. يمكنك قراءة دلائل Rails لمزيد من المعلومات حول مولدات Rails.

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

في هذه النقطة، ستتم طباعة بعض التعليمات أيضًا في واجهة الطرفية، كما يلي:

Output
===============================================================================

Depending on your application's configuration some manual setup may be required:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

     In production, :host should be set to the actual host of your application.

     * Required for all applications. *

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

     * Not required for API-only Applications *

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

     * Not required for API-only Applications *

  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

     * Not required *

===============================================================================

على الرغم من أنه ليس مطلوبًا في هذا البرنامج التعليمي القيام بإعداد يدوي لهذا، إلا أنه ستتم إضافة رسائل فلاش لـ notice و alert في وقت لاحق في هذه الخطوة.

لقد انتهيت من تثبيت Devise. في الخطوة التالية، ستحتاج إلى تكوين بعض الأشياء في ملف المبشر الخاص بـ Devise الذي تم إنشاؤه للتو.

عند تشغيل الأمر devise:install، قمت بإنشاء config/initializers/devise.rb، وهو ملف المبشر لـ Devise. عند بدء تشغيل تطبيقك على Rails، ستقوم Rails بتحميل جميع الجواهر والمكونات الإضافية، ثم ستقوم بتحميل جميع ملفات المبشر. يمكنك تكوين إعدادات محددة لأجزاء مختلفة من تطبيقك من هذه الملفات المبدئية. تقع جميع هذه المبشرات في المجلد config/initializers/، وهذا هو المكان الذي ينشئ فيه جوهر Devise مبشره أيضًا.

قم بفتح config/initializers/devise.rb للتعديل. في الملف، اعثر على بلوك Devise.setup وأضف السطر المميز التالي (قد يكون هناك بلوكات أخرى من الشفرة داخل بلوك Devise.setup، ولكن يمكنك تجاهلها).

Devise.setup do |config|
  # ...

  config.navigational_formats = ['*/*', :html, :turbo_stream]

  # ...
end

يضيف هذا السطر turbo_stream كتنسيق تنقلي. تعد Turbo Streams جزءًا من Turbo، الذي يتيح لك إرسال HTML المقدم من الخادم وتقديم الصفحات دون استخدام الكثير من JavaScript. يجب أن تقوم بإضافة هذا ليعمل Devise 4.8.1 مع Rails 7؛ وإلا، ستحصل على خطأ undefined method user_url.

احفظ وأغلق الملف.

بعد ذلك، ستضيف أيضًا رسائل الفلاش للإشعار والتنبيه التي تم تسليط الضوء عليها في التعليمات المطبوعة مسبقًا. تكون الوسوم alert و notice مكان ظهور رسائل مثل “كلمة مرور غير صحيحة” وما شابه في واجهة المستخدم. يمكنك دائمًا تنفيذ رسائل تنبيه مخصصة في تطبيقك (على سبيل المثال، إذا كنت تستخدم معاملات Axios مع React كواجهة أمامية)، ولكن لهذا البرنامج التعليمي، ستكمل إعداد Devise الحد الأدنى.

افتح app/views/layouts/application.html.erb للتحرير. أضف الوسوم لرسائل "notice" و "alert" داخل وسم الجسم، مباشرة فوق <%= yield %>:

...
<body>
  <p class="notice"><%= notice %></p> 
  <p class="alert"><%= alert %></p> 
  <%= yield %>
</body>

عندما يتم تقديم العرض في المستعرض، سيتم استبدال الجزء <%= yield %> بالمحتوى من ملفات العرض الخاصة بك. في ملف العرض الخاص بك، كان لديك فقط وسم p. سيتم استبدال هذا الوسم yield بهذا المحتوى.

احفظ وأغلق ملفك.

في هذه الخطوة، قد قمتَ بتثبيت وتكوين Devise في مشروعك. في الخطوة التالية، ستقوم بإنشاء نموذج المستخدم لتطبيقك باستخدام Devise وإعداد مصادقة المستخدم.

الخطوة 4 — إنشاء نموذج المستخدم باستخدام Devise

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

في هذه الخطوة، ستقوم بتوليد نموذج مستخدم، ثم فحص التكوين الافتراضي، وبعد ذلك تشغيل الترحيل لتحديث قاعدة البيانات الخاصة بك.

نظرًا لأن Rails هو إطار نموذج-عرض-تحكم (MVC)، يكون لكل جدول في قاعدة البيانات فئة مرتبطة به، يمكن استخدامها للعمل مع البيانات في الجدول. في هذه الحالة، إذا قمت بإنشاء جدول users، يمكنك استخدام نموذج User للقيام بعمليات مثل User.first أو User.find_by_email("[email protected]"). يمكنك إنشاء هذا النموذج عن طريق إنشاء فئة عادية تورث من ApplicationRecord في Rails، ولكن توليد نموذج المستخدم باستخدام Devise يمنحك العديد من الطرق التي يمكنك استخدامها للمصادقة.

لإنشاء مستخدم Devise الخاص بك، قم بتشغيل الأمر التالي:

bundle exec rails g devise user

سيتم طباعة الناتج التالي على الشاشة:

Output
invoke  active_record
create    db/migrate/20220908152949_devise_create_users.rb
create    app/models/user.rb
invoke    test_unit
create      test/models/user_test.rb
create      test/fixtures/users.yml
insert    app/models/user.rb
route  devise_for :users

يظهر الناتج أن Devise قامت بإنشاء عدة ملفات، وأنشأت اختبارات، وأضافت مسارات. الملف الأول، db/migrate/20220908152949_devise_create_users.rb، هو ملف ترحيل لإنشاء جدول users في قاعدة البيانات الخاصة بك. ملف ترحيل Rails يصف التغييرات التي يجب إجراؤها في قاعدة البيانات. ستحتوي أسماء ملفات الترحيل على طابع زمني بحيث يعرف Rails في أي ترتيب يجب إجراء تلك التغييرات.

كما قام Devise بإنشاء ملف نموذج المستخدم (app/models/user.rb)، جنبًا إلى جنب مع الاختبارات لنفس الملف. تشير السطر الأخير في الناتج إلى أنه تمت إضافة مسار إلى ملف config/routes.rb الموجود بالفعل. يقوم Devise تلقائيًا بإضافة جميع المسارات مثل /users/sign_up و /users/sign_out باستخدام المساعد devise_for :users.

قبل تشغيل ملف الترحيل وإنشاء جدول users في قاعدة البيانات، دعنا نراجع هذه الملفات التي تم إنشاؤها. سيساعدك هذا في فهم التكوين الذي أنشأه Devise حتى تعرف ما يحدث عند تشغيل الترحيل.

ابدأ بفتح ملف الترحيل (db/migrate/20220908152949_devise_create_users.rb) لمراجعة الشفرة الافتراضية:

# frozen_string_literal: true

class DeviseCreateUsers < ActiveRecord::Migration[7.0]
  def change
    create_table :users do |t|
      ## المصادقة عبر قاعدة البيانات
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ## القابل للاسترداد
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## قابل للتذكر
      t.datetime :remember_created_at

      ## قابل للتتبع
      # t.integer  :sign_in_count, default: 0, null: false
      # t.datetime :current_sign_in_at
      # t.datetime :last_sign_in_at
      # t.string   :current_sign_in_ip
      # t.string   :last_sign_in_ip

      ## القابل للتأكيد
      # t.string   :confirmation_token
      # t.datetime :confirmed_at
      # t.datetime :confirmation_sent_at
      # t.string   :unconfirmed_email # إذا كان في استخدام إعادة التأكيد

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

بما أنك لا تحتاج إلى إجراء أي تغييرات، قم بإغلاق ملف التهجير.

Devise أيضا أنشأ ملف نموذج User. سيكون هذا الملف متاحًا في الدليل app/models/.

افتح ملف النموذج app/models/user.rb لمراجعة الشيفرة الافتراضية:

class User < ApplicationRecord
# تضمين وحدات شيفرة الافتراضية. الوحدات الأخرى المتاحة هي:
# :confirmable، :lockable، :timeoutable، :trackable و :omniauthable
devise :database_authenticatable, :registerable,
       :recoverable, :rememberable, :validatable
end

A few options are added by Devise to configure how the user model works. The basic modules (database_authenticatable, registerable, recoverable, rememberable, and validatable) are already included. There are some additional options commented out, corresponding to the extra features you saw in the migration file. You can add these modules to the model file and configure the migration, depending on how much functionality you need in your application.

هذا ما تقوم به الوحدات الأساسية:

• database_authenticatable: يمكن للمستخدمين المصادقة على أنفسهم باستخدام حقل تسجيل الدخول وكلمة المرور. سيتم تخزين كلمة المرور المشفرة لديهم في قاعدة البيانات الخاصة بك.
• registerable: يمكن للمستخدمين تسجيل أنفسهم وتحرير أو حذف حساباتهم.
• recoverable: يمكن للمستخدمين إعادة تعيين كلمة المرور واستعادة حساباتهم إذا نسوا بيانات اعتمادهم.
• rememberable: تذكر هذه الوحدة جلسات المستخدمين عن طريق حفظ المعلومات في ملف تعريف الارتباط في المتصفح.
• validatable: توفير التحقق لحقول البريد الإلكتروني وكلمة المرور للمستخدم. (على سبيل المثال، يطلب تطبيقك كلمة مرور تكون طولها ما لا يقل عن ستة أحرف، على الرغم من عدم تحديد أي التحققات المخصصة في نموذجك.)

تم تضمين هذه الوحدات الأساسية في نموذج المستخدم الذي قمت للتو بإنشائه. يمكنك العثور على قائمة كاملة بالوحدات التي تأتي مع شيفرة في مستودع شيفرة GitHub.

لا داعي لإجراء أي تغييرات، لذا أغلق ملف النموذج User.

التحديث الآخر هو أن ملف config/routes.rb تم تعديله لإضافة سطر devise_for لـ users:

Rails.application.routes.draw do
  devise_for :users

  root "home#index"
end

هذه طريقة مفيدة تعرف جميع المسارات المطلوبة المتعلقة بمصادقة المستخدم مثل /users/sign_in، /users/sign_out، و/users/password/new. يعتني Devise بكل هذا بالنسبة لك ويحافظ حتى على نظافة ملف المسارات. إذا كنت ترغب في فهم كيف يترجم تلقائيًا إضافة devise_for :users إلى كل هذه المسارات، يمكنك التحقق من الشيفرة المصدرية للطريقة في مستودع Devise على GitHub.

لا داعي لإجراء أي تغييرات هنا، لذا أغلق ملف config/routes.rb.

لمعرفة المسارات المحددة في تطبيقك، يمكنك عرضها عن طريق تشغيل الأمر التالي:

bundle exec rails routes

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

سيكون الإخراج طويلاً، ولكن هنا مقتطف يظهر بعض المسارات:

المسارات المدرجة في الإخراج هي المسارات التي تمت إضافتها بواسطة Devise عندما قمت بتضمين سطر devise_for :users في ملف مساراتك. هذه هي المسارات لإجراءات مثل تسجيل الدخول، التسجيل، إعادة تعيين كلمة المرور، وما إلى ذلك.

الآن بعد مراجعتك للملفات والتكوين التي أنشأها Devise، يمكنك تشغيل الترحيل التي أنشأتها في بداية هذه الخطوة باستخدام الأمر التالي:

bundle exec rails db:migrate

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

ستظهر إخراج مثلما يلي على الشاشة:

Output
== 20220908152949 DeviseCreateUsers: migrating ================================
-- create_table(:users)
 -> 0.0040s
-- add_index(:users, :email, {:unique=>true})
 -> 0.0012s
-- add_index(:users, :reset_password_token, {:unique=>true})
 -> 0.0011s
== 20220908152949 DeviseCreateUsers: migrated (0.0074s) =======================

بمجرد تشغيل الترحيل، تكون قاعدة البيانات قد تم تكوينها. لقد قمت بكل ما تحتاجه لتكوين المصادقة للمستخدم في مشروعك.

في هذه اللحظة، أعد تشغيل خادم Rails الخاص بك:

bundle exec rails server

يتم تحميل ملف المبدأ الذي تم الإشارة إليه في وقت سابق فقط عند تشغيل Rails. تحتاج إلى إعادة تشغيل الخادم حتى يتمكن Rails من تحميل ملف المبدأ الجديد لـ Devise وتكوين كل شيء ليعمل التصديق للمستخدم.

انتقل إلى http://localhost:3000/users/sign_up في متصفحك، حيث ستجد نموذجًا للتسجيل لإنشاء حساب عن طريق إدخال بريد إلكتروني وكلمة مرور. (في الخطوة التالية، ستضيف أزرارًا للتسجيل وتسجيل الدخول إلى صفحة الهبوط لتسهيل التنقل إلى هذا الرابط للقارئ.)

لتجربة التصديق، أدخل بريدًا إلكترونيًا اختباريًا مثل [email protected] وكلمة مرور.

بمجرد التسجيل ، سيتم توجيهك إلى الصفحة الرئيسية ، التي تعرض مرحبًا بك في DigitalOcean! بالإضافة إلى رسالة تقول أنك قد سجلت بنجاح ، مثل هذا:

يتم عرض إشعار نجاح التسجيل هذا في العلامة <p class="notice"><%= notice %></p> التي قمت بإضافتها في ملف application.html.erb.

في هذه النقطة ، قمت بتكوين مصادقة المستخدم مع Devise في مشروعك وقمت بالتسجيل باستخدام حساب عينة. لقد قمت بتكوين Devise لتلبية احتياجات تطبيقك ، بينما قام Devise بتوليد المسارات والعروض والتحكمات التي تيسر هذه تجربة تسجيل المستخدم.

الآن بعد تأكيد أن عملية التسجيل تعمل كما هو متوقع ، خطوتك التالية هي إضافة هذه المصادقة إلى الصفحة المقصودة التي قمت بإنشائها في الخطوة 2. في الخطوة التالية ، ستقوم بربط صفحة التسجيل بالصفحة المقصودة حتى لا يضطر المستخدمون إلى التنقل إلى عنوان URL محدد من أجل التسجيل ، مثلما كان عليك فعله هنا.

الخطوة 5 — ربط المصادقة بالصفحة المقصودة

لديك جميع الوظائف المعدة في مشروعك، ولكن لا تزال بحاجة إلى ربط صفحات Devise المنشأة مع صفحة الهبوط الخاصة بك. في الخطوة السابقة، قمت بزيارة الصفحة /users/sign_up يدويًا لتسجيل الدخول. في هذه الخطوة، ستقوم بربط جميع الصفحات معًا عن طريق إضافة الروابط المطلوبة إلى صفحة الهبوط الخاصة بك. ستظهر للمستخدمين أيضًا روابط تسجيل الدخول أو تسجيل الخروج من التطبيق بناءً على حالتهم.

ستقوم بذلك باستخدام بعض وسائل المساعدة من Devise. تأتي حزمة Devise مع العديد من وسائل المساعدة التي يمكنك استخدامها دون الحاجة إلى تنفيذ كل شيء بنفسك. يجعل ذلك الكود أسهل قراءة وصيانة.

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

افتح ملف app/views/home/index.html.erb للتحرير وأضف الأسطر المظللة:

<% if user_signed_in? %> 
 <div> Welcome <%= current_user.email %> </div> 
  <%= button_to "Sign out", destroy_user_session_path, method: :delete %> 
<% else %>
  <%= button_to "Sign in", new_user_session_path %> 
<% end %>
<h1>Hello DigitalOcean!</h1>

user_signed_in? يأتي من وسائل المساعدة المرتبطة بوحدات التحكم في Devise. يتحقق مما إذا كان المستخدم قد قام بتسجيل الدخول أم لا ويعيد قيمة منطقية true أو false. يمكنك استخدام هذه النتيجة لبرمجة وظائف أخرى في تطبيقك، مثل عرض معلومات حساب المستخدم إذا كان قد قام بتسجيل الدخول. لمزيد من التفاصيل حول هذه الوسيلة المساعدة، يمكنك التحقق من الشيفرة المصدرية في مستودع GitHub الخاص بـ Devise.

current_user هو مساعد Devise الذي يصل إلى تفاصيل المستخدم الذي قام بتسجيل الدخول حاليًا إلى التطبيق. على سبيل المثال، إذا قمت بتسجيل الدخول بـ [email protected]، سيقوم المساعد current_user بإرجاع نموذج المستخدم لـ [email protected]. لذا، عند استخدام current_user.email، ستحصل على [email protected] كنتيجة. باستخدام Devise، تتجنب الحاجة إلى تنفيذ هذه المنطق من الصفر، مما يوفر لك الوقت والجهد.

أخيرًا، مع هذا الكود، قمت بإضافة أزرار تسجيل الدخول و تسجيل الخروج إلى صفحة الهبوط. استنادًا إلى نتيجة طريقة المساعد user_signed_in?، ستظهر الخيارات لتسجيل الدخول أو تسجيل الخروج باستخدام الأزرار تسجيل الدخول و تسجيل الخروج المضافة حديثًا.

أنت تستخدم طريقة button_to لتعريف زر يأخذ المستخدم إلى مسار محدد. كما أنك تستخدم طرق مساعدة للحصول على هذه المسارات: destroy_user_session_path يقوم بتحليل /users/sign_out و new_user_session_path يقوم بتحليل /users/sign_in. (يمكنك مراجعة القائمة الكاملة لمساعدين مسار URL عن طريق تشغيل bundle exec rails routes كما هو مذكور في الخطوة السابقة.)

احفظ وأغلق الملف.

قم بتحديث الصفحة في المتصفح لمراجعة التغييرات.

إذا لم تقم بالفعل بتجربة التسجيل في تطبيقك، يمكنك زيارة المسار /users/sign_in عن طريق النقر على زر تسجيل الدخول على صفحتك. من هنا، يمكنك المتابعة لإنشاء حساب جديد عن طريق النقر على الرابط التسجيل في الأسفل. قم بإدخال بريد إلكتروني تجريبي مثل [email protected] وكلمة مرور. بمجرد تسجيل الدخول، ستعود إلى صفحة الهبوط مرة أخرى. الآن تعرض الصفحة الرئيسية عنوان البريد الإلكتروني للمستخدم المسجل حاليًا، جنبًا إلى جنب مع زر تسجيل الخروج، كما هو موضح هنا:

ستحصل أيضًا على رسالة تقول: لقد قمت بالتسجيل بنجاح.

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

الاستنتاج

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

لفهم أفضل لـ Devise وطرق المساعدة والأساليب الإضافية، يمكنك الاطلاع على ملف README في مستودع Devise على GitHub. كخطوة تالية لهذا البرنامج التعليمي، يمكنك محاولة عرض التحية “مرحبًا بك في العالم!” على الصفحة بشكل شرطي مثل مرحبًا اسم المستخدم اعتمادًا على ما إذا كان المستخدم قد قام بتسجيل الدخول أم لا.

يمكنك العثور على الشيفرة المصدرية لهذا المشروع في مستودع GitHub المجتمع الخاص بـ DigitalOcean.