خبرکاو:

Amazon Cognito یک راه حل مبتنی بر ابر و بدون سرور برای مدیریت هویت و دسترسی است. قابلیت های مشابه Auth0 و Okta را ارائه می دهد.

Cognito بخشی از مجموعه خدمات AWS است، پس اگر قبلاً از AWS در قسمت‌های دیگر پشته خود استفاده می‌کنید، می‌توانید به راحتی آن را وارد کنید.

با این حال، پیاده سازی مدیریت هویت و دسترسی اغلب دشوار است و Amazon Cognito از این نظر تفاوتی ندارد. این مقاله یک راهنمای مبتدی برای راه‌اندازی اولیه با Cognito ارائه می‌کند. به طور خاص، آن را پوشش می دهد:

👀 مروری بر یک نمونه برنامه

📚 توضیحی در مورد مفاهیم کلیدی که باید درک کنیم

🤗 نحوه ثبت نام و احراز هویت کاربران در یک برنامه وب

🚪 نحوه ایمن سازی نقاط پایانی در یک API سمت سرور

🛠 مدیریت کاربر

این آموزش به شدت بر احراز هویت متمرکز است: یعنی چگونه تأیید کنیم که یک کاربر همان کسی است که ادعا می کند. این مجوز را پوشش نمی دهد - اگرچه این چیزی است که Cognito می تواند به ما کمک کند.

اگر می‌خواهید بیشتر بخوانید، در اینجا خلاصه‌ای از احراز هویت در مقابل مجوز وجود دارد.

تحلیل اجمالی راه حل

قبل از شروع سفر به درک اینکه چگونه احراز هویت را برای برنامه‌های بدون سرور خود دریافت می‌کنید، یک مرور مختصر از راه‌حلی که می‌توانید با استفاده از مفاهیم و کد مورد بحث در این مقاله ایجاد کنید، ارائه خواهم کرد.

برنامه به عنوان یک نسخه آزمایشی زنده مستقر شده است. خوش آمدید به آنجا بروید و یک حساب کاربری ایجاد کنید.

تمام کد منبع این مثال برای مرجع در GitHub نیز موجود است: cognito-react-nodejs-example .

رابط کاربری ساده React

ما یک رابط کاربری ساده در React خواهیم داشت که قابلیت احراز هویت اولیه را ارائه می دهد.

از React UI که دکمه های ورود و ثبت نام را نشان می دهد" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2023/01/Pasted-image-20221226160435.png 600w, https://www.freecodecamp.org/news/content/images/2023/01/Pasted-image-20221226160435.png 676w" width="676" height="320" loading="lazy">

ثبت

با کلیک بر روی دکمه ثبت نام در رابط کاربری (UI)، کاربر به UI ارائه شده توسط Amazon Cognito هدایت می شود که به کاربر اجازه می دهد با یک آدرس ایمیل و رمز عبور ثبت نام کند:

را نشان می دهد" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2023/01/Pasted-image-20221226160559.png 600w, https://www.freecodecamp.org/news/content/images/size/w1000/2023/01/Pasted-image-20221226160559.png 1000w, https://www.freecodecamp.org/news/content/images/2023/01/Pasted-image-20221226160559.png 1221w" sizes="(min-width: 1200px) 1200px" width="1221" height="489" loading="lazy">

پس از ارائه آدرس ایمیل و رمز عبور، کاربر ایمیلی حاوی کد تایید دریافت می کند که برای تکمیل مراحل ثبت نام باید در رابط کاربری ثبت نام وارد شود.

که کد تأیید شش رقمی را نشان می دهد" width="544" height="316" loading="lazy">

وارد شدن

پس از ثبت نام موفقیت آمیز، کاربر به برنامه اصلی هدایت می شود و به طور خودکار وارد سیستم می شود:

از UI پس از ورود که آدرس ایمیل کاربر را نمایش می دهد" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2023/01/Pasted-image-20221226160856.png 600w, https://www.freecodecamp.org/news/content/images/2023/01/Pasted-image-20221226160856.png 755w" width="755" height="376" loading="lazy">

برای کاربرانی که قبلاً یک حساب کاربری دارند، با کلیک بر روی دکمه ورود به سیستم ، آنها را برای ورود به سیستم به یک رابط کاربری هدایت می‌کند.

احراز هویت سمت سرور

پروژه نمونه از رندر سمت سرور استفاده می کند. سرور کاربر را احراز هویت می‌کند و پس از احراز هویت موفقیت‌آمیز، سرور عبارت Hello [email] در صفحه HTML ارسال شده به مشتری ارائه می‌کند.

از صفحه که توسط سرور ارائه می شود" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2023/01/Pasted-image-20221226161113.png 600w, https://www.freecodecamp.org/news/content/images/2023/01/Pasted-image-20221226161113.png 691w" width="691" height="95" loading="lazy">

خروج

در نهایت، با کلیک بر روی دکمه خروج از رابط کاربری، کاربر از سیستم خارج شده و به صفحه ورود هدایت می شود:

از فرم ورود که پس از خروج از سیستم نمایش داده می شود" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2023/01/Pasted-image-20221226161215.png 600w, https://www.freecodecamp.org/news/content/images/2023/01/Pasted-image-20221226161215.png 957w" width="957" height="553" loading="lazy">

در حالی که عملکرد در این پروژه نمونه نسبتاً ساده به نظر می رسد، پیچیدگی نظری و فنی برای کار کردن همه چیز وجود دارد.

با این حال، هنگامی که مفاهیم و فناوری های مورد بحث در این مقاله را درک کردید، می توانید یک راه حل بسیار کم هزینه، مقیاس پذیر و ایمن برای مدیریت کاربر بسازید.

مفاهیم کلیدی

برای اینکه بخشی از کد کار کند، اغلب کافی است چند جستجوی سریع در گوگل انجام دهید و بیت های کد را از اینجا و آنجا کپی کنید. این برای احراز هویت توصیه نمی شود.

برای ایجاد یک راه حل، به پایه ای اساسی در تعدادی از مفاهیم نیاز دارید. در اصل، شما باید کمی در مورد OAuth 2.0 و Amazon Cognito بیاموزید، که هر دوی آنها را در بخش های بعدی پوشش خواهم داد.

OAuth 2.0 چیست؟

OAuth 2.0 یک استاندارد اینترنت است (به RFC 6749 مراجعه کنید). این استاندارد مانند سایر استانداردها مانند HTTP یا SMTP توسط بسیاری از برنامه ها، فریمورک ها، سرویس ها و سرورها پیاده سازی می شود.

سرویس ها و سرورهای محبوبی که استاندارد OAuth 2.0 را پیاده سازی می کنند عبارتند از:

هدف OAuth 2.0 ارائه امنیت و راحتی برای توسعه دهندگان است. یکی از جذاب ترین ویژگی های آن این است که دارندگان برنامه را قادر می سازد تا بدون نیاز به ذخیره و مدیریت رمز عبور کاربران، احراز هویت کاربران را تأیید کنند.

را نداشته باشید، نمی توانید آنها را بدزدید" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2023/01/Pasted-image-20221216063953.png 600w, https://www.freecodecamp.org/news/content/images/2023/01/Pasted-image-20221216063953.png 694w" width="694" height="394" loading="lazy">

احراز هویت ساده لوح (این کار را نکنید)

بیایید ابتدا با اجرای ساده احراز هویت کاربر شروع کنیم:

در این پیاده سازی کاربر نام کاربری و رمز عبور را در مرورگر وارد می کند. سپس نام کاربری و رمز عبور را به سرور می فرستیم، که اعتبارنامه ها را در مقابل موارد ذخیره شده در پایگاه داده تحلیل می کند.

اگر اعتبارنامه ها درست باشد، سرور یک شناسه جلسه صادر می کند که مشتری می تواند بدون نیاز به ارائه نام کاربری و رمز عبور، آن را با درخواست های بعدی اضافه کند.

این پیاده سازی ما را ملزم به ذخیره رمزهای عبور (یا هش رمزهای عبور در پایگاه داده خود) می کند. این به راحتی می تواند منجر به مشکلات امنیتی جدی شود. این کار را انجام ندهید مگر اینکه کاملاً مجبور باشید.

جریان تأیید اعتبار OAuth

OAuth 2.0 راه بهتری برای احراز هویت کاربران در اختیار ما قرار می دهد. OAuth 2.0 یک استاندارد گسترده است و چندین جریان مختلف احراز هویت را برای احراز هویت کاربران ارائه می دهد.

من فقط یک جریان ممکن را در اینجا شرح خواهم داد - جریانی که بعداً در این مقاله اجرا خواهیم کرد.

این جریان شامل مراحل زیر است که هر یک با جزئیات بیشتر در زیر توضیح داده شده است:

مرحله 1: تغییر مسیر به رابط کاربری مجوز

به جای برقراری تماس API از برنامه ما با نام کاربری و رمز عبور، کاربر را از برنامه وب خود به برنامه وب میزبانی شده توسط سرور مجوز ما هدایت می کنیم.

پس ، برای مثال، اگر برنامه شما در URL https://myawesomeapp.com میزبانی شود، کاربر را به https://auth.myawesomeapp.com یا https://auth.cloudprovided.com هدایت می کنید.

مرحله 2: با مجوز سرور وارد شوید

سپس کاربر نام کاربری و رمز عبور خود را در صفحه ای که به آن هدایت می شود ارائه می دهد و سرور مجوز اعتبار ارائه شده را تأیید می کند. شما در اینجا محدود به نام کاربری و رمز عبور ساده نیستید. سرورهای مجوز ممکن است احراز هویت دو مرحله ای و/یا مکانیسم های دیگر را پیاده سازی کنند.

برنامه وب میزبانی سرور مجوز همچنین ممکن است کوکی ها را برای کاربران شناخته شده ذخیره کند. پس ، اگر یک کلاینت قبلاً احراز هویت شده باشد، سرور مجوز ممکن است از کاربر بخواهد که اعتبار خود را دوباره وارد کند - اما در عوض اطلاعات ذخیره شده در مشتری را تأیید می کند.

مرحله 3: بازگشت به تماس به برنامه شما

هنگامی که کاربر با موفقیت احراز هویت شد، برنامه وب سرور مجوز کاربر را به برنامه شما هدایت می کند. URL مورد استفاده برای فراخوانی برنامه شما حاوی یک کد مجوز است. به عنوان مثال، نشانی اینترنتی که کاربر به آن هدایت می شود ممکن است به شکل زیر باشد:

 https://myawesomeapp.com?code=xxxxxxxxxxx

مرحله 4: تبادل کد برای توکن ها

سپس برنامه می تواند با API سرور مجوز تماس بگیرد تا این کد را با مجموعه ای از توکن ها مبادله کند.

می توانید مستقیماً از برنامه وب خود با API سرور مجوز تماس بگیرید یا می توانید کد را به سرور خود ارسال کنید و از سرور خود بخواهید که API سرور مجوز را صدا کند. گزینه دوم تضمین می کند که مرورگر وب کاربر هرگز از توکن های تولید شده آگاهی ندارد. با این حال، این مستلزم اجرای درجه ای از مدیریت جلسه برای سرور شما است.

توکن هایی که در ازای کد دریافت می کنید عبارتند از:

شناسه رمز : رمز شناسه حاوی اطلاعاتی درباره هویت کاربر، مانند نام ، آدرس ایمیل یا شماره تلفن است.

نشانه دسترسی : نشانه دسترسی حاوی اطلاعاتی است که کاربر احراز هویت شده باید به کدام منابع دسترسی داشته باشد.

Refresh Token : نشانه refresh را می توان برای درخواست مجموعه جدیدی از نشانه ها از سرور مجوز استفاده کرد.

همه این توکن ها به عنوان JSON Web Tokens تعریف می شوند که به JWT نیز معروف هستند.

توکن شناسه و توکن دسترسی به روشی کاملاً نبوغه کار می کنند. برای هر برنامه ای بسیار آسان است که آنها را تجزیه کند و اطلاعاتی را که ارائه می دهد استخراج کند، به عنوان مثال برای به دست آوردن آدرس ایمیل کاربر از رمز شناسه .

مرحله 5: تأیید توکن ها

با این حال، شما نباید فقط اطلاعات این توکن ها را بخوانید و به اطلاعاتی که ارائه می دهند اعتماد کنید. در عوض، ابتدا باید توکن ها را تأیید کنید .

شما با دانلود یک کلید عمومی ارائه شده توسط سرور مجوز، که در مجموعه کلیدهای وب JSON (JWKS) ارائه شده است، نشانه ها را تأیید می کنید. معمولاً اینها در یک URL مانند موارد زیر ارائه می شوند:

 https://auth.yourapp.com/[...]/.well-known/jwks.json

پس از دانلود کلید عمومی، می‌توانید با این کلید توکن‌ها را تأیید کنید. کتابخانه‌های زیادی برای این کار موجود است، به این فهرست نگاه کنید که توسط OpenID نگهداری می‌شود.

بعد از اینکه توکن ها را تأیید کردید، می توانید به اطلاعاتی که توکن ها دارند اعتماد کنید و از آنها در منطق برنامه خود استفاده کنید.

جریان احراز هویت OAuth: کمی سخت شدن امنیت

OAuth 2.0 یک استاندارد گسترده است و تعدادی ویژگی اختیاری را تعریف می کند که در برابر آسیب پذیری های رایج کمک می کند.

یکی از آسیب پذیری های رایج، به اصطلاح رهگیری تغییر مسیر است. ما می توانیم با استفاده از PKCE (کلید اثبات برای تبادل کد) در برابر این امر محافظت کنیم.

PKCE با گنجاندن یک چالش کد هنگام هدایت اولیه کاربر به برنامه وب سرور مجوز کار می کند. برای این کار، یک تأیید کننده کد (توالی تصادفی از کاراکترها) تولید می کنید. سپس با استفاده از SHA-256 یک هش ایجاد می کنید. شما هش را در نشانی اینترنتی که کاربر را به آن هدایت می‌کنید قرار می‌دهید:

 https://auth.yourapp.com/loginui?...&code_challenge=[hash of code verifier]

شما باید تأیید کننده کد را روی کلاینت ذخیره کنید، به عنوان مثال در حافظه محلی مرورگر.

هنگامی که کد مجوز ارائه شده در URL بازگشت به تماس را با برنامه وب خود برای نشانه ها مبادله می کنید، تأیید کننده کد را در درخواست اضافه می کنید.

سرور مجوز فقط زمانی توکن ها را صادر می کند که تأیید کننده کد ارائه شده با چالش کدی که با درخواست اولیه ارائه کرده اید مطابقت داشته باشد.

مفاهیم شناختی

اکنون که برخی از اصول اولیه OAuth را می دانید، زمان آن رسیده است که نگاهی به فناوری خاصی که برای سرور احراز هویت استفاده می شود بیندازید: Amazon Cognito .

این میم آنقدرها هم پیچیده نیست" width="497" height="328" loading="lazy">

من در اینجا همه جنبه های Cognito را پوشش نمی دهم - فقط بر آنچه برای مثال مورد نیاز است تمرکز می کنم.

به طور خاص پوشش خواهم داد:

استخرهای کاربران

مشتریان برنامه

رابط کاربری میزبانی شده

نقاط پایانی

من همچنین به شما نشان خواهم داد که چگونه هر یک از اینها را با استفاده از Terraform پیکربندی کنید. در این بخش، من به کد منبع Terraform از یک پروژه الگو در GitHub cognito-nodejs-template اشاره خواهم کرد.

این پروژه قالب به طور مرتب با وصله های امنیتی به روز می شود و شما به راحتی می توانید آن را برای شروع پروژه Cognito خود شبیه سازی کنید.

تمام کد منبع TypeScript از پروژه نمونه ارجاع داده شده است: cognito-react-nodejs-example .

استخرهای کاربران

مجموعه‌های کاربران در Cognito اساساً پایگاه داده‌ای از کاربران هستند که با برخی از قابلیت‌ها برای ثبت نام و ورود کاربران ترکیب شده‌اند.

مجموعه‌های کاربر را می‌توان به گونه‌ای پیکربندی کرد که به کاربران اجازه دهد با ورود به سیستم اجتماعی خود (به عنوان مثال یک حساب Google یا حساب فیس‌بوک) یا از طریق حساب‌هایی که مستقیماً با Cognito ایجاد می‌شوند، ثبت‌نام کنند.

قطعه زیر شامل پیکربندی برای استخر کاربر مورد استفاده در پروژه الگو است ( main.tf ):

 resource "aws_cognito_user_pool" "pool" { name = var.user_pool_name # Add your app name to the below email_verification_subject = "Your verification code" email_verification_message = "Your verification code is {####}." schema { attribute_data_type = "String" name = "email" required = true mutable = true string_attribute_constraints { min_length = 1 max_length = 100 } } username_attributes = ["email"] auto_verified_attributes = ["email"] password_policy { minimum_length = 6 require_lowercase = false require_numbers = false require_symbols = false require_uppercase = false } device_configuration { challenge_required_on_new_device = true device_only_remembered_on_user_prompt = false } }

از آنجایی که User Pool پایگاه داده ای از کاربران را توصیف می کند، باید نوع داده هایی را که می خواهید برای کاربران ذخیره کنید، تعریف کنید. این در ویژگی schema در بالا تعریف شده است.

پروژه الگو فقط یک ویژگی را برای کاربران پیکربندی می کند: email . این به شما امکان می دهد آدرس ایمیل کاربر را ذخیره کنید.

من توصیه می کنم حداقل مطلق ویژگی ها را برای کاربران تعریف کنید. این به این دلیل است که تغییر ویژگی‌ها بعداً دشوار است. پس ، ما فقط ویژگی email را در اینجا تعریف می کنیم - زیرا قصد داریم آن را برای کاربران خود ضبط و تأیید کنیم.

این الگو همچنین یک password_policy برای گذرواژه هایی که کاربران باید تنظیم کنند، تعریف می کند. User Pool در مثال دارای یک خط مشی رمز عبور بسیار مجاز است - اما شما می توانید آن را به راحتی با تغییر main.tf تغییر دهید.

Cognito برخی از آپشن های بسیار قدرتمند را ارائه می‌کند، مانند اینکه به شما امکان می‌دهد آدرس‌های ایمیل کاربران را به طور خودکار تأیید کنید. این با تنظیم ویژگی auto_verified_attributes = ["email"] به دست می آید.

تنظیم این باعث می شود که Cognito یک ایمیل با یک کد منحصر به فرد برای کاربران جدید ارسال کند. کاربران تنها پس از وارد کردن این کد با رابط کاربری Cognito، اعتبارسنجی می شوند و می توانند به برنامه دسترسی داشته باشند.

مشتریان برنامه

می‌توانید از Cognito هم با برنامه‌های وب و هم برای موبایل استفاده کنید. برای هر کلاینتی که می خواهید استفاده کنید باید پیکربندی خاصی ارائه دهید.

این الگو تنظیماتی را برای یک سرویس گیرنده وب ارائه می دهد که به کاربران امکان می دهد از طریق مرورگر وب خود ثبت نام کنند.

این در web-client.tf در پروژه الگو پیکربندی شده است:

 resource "aws_cognito_user_pool_client" "client" { name = "${var.user_pool_name}-client" user_pool_id = aws_cognito_user_pool.pool.id callback_urls = [var.callback_url] default_redirect_uri = var.callback_url allowed_oauth_flows_user_pool_client = true allowed_oauth_flows = ["code", "implicit"] allowed_oauth_scopes = ["email", "openid"] supported_identity_providers = ["COGNITO", # uncomment this to enable login with Google # - remember to provide your application details in identity-providers.tf # aws_cognito_identity_provider.google_provider.provider_name ] } resource "aws_cognito_user_pool_domain" "main" { domain = data.aws_acm_certificate.wildcard.domain certificate_arn = aws_acm_certificate.wildcard.arn user_pool_id = aws_cognito_user_pool.pool.id depends_on = [ aws_acm_certificate_validation.wildcard_validation, ] } resource "aws_cognito_user_pool_ui_customization" "ui" { css = ".label-customizable {font-weight: 400;}" image_file = filebase64("favicon-32x32.png") # Refer to the aws_cognito_user_pool_domain resource's # user_pool_id attribute to ensure it is in an 'Active' state user_pool_id = aws_cognito_user_pool_domain.main.user_pool_id }

برای پشتیبانی از جریان احراز هویت مبتنی بر OAuth که در بالا تعریف شده است، باید OAuth را در پیکربندی کلاینت خود فعال کنید.

این الگو به گونه‌ای پیکربندی شده است که با ارائه یک ایمیل یا از طریق Open ID، ثبت نام کنید. با این حال، برای فعال کردن Open ID، باید پیکربندی اضافی در ID-providers.tf ارائه کنید، مانند هویت برنامه ما با ارائه دهنده Open ID.

پیکربندی کلاینت فوق همچنین برخی سفارشی سازی های جزئی از رابط کاربری ارائه شده به کاربران در هنگام ثبت نام و ورود به سیستم با استفاده از منبع aws_cognito_user_pool_ui_customization را فراهم می کند.

Cognito به طور پیش‌فرض رابط کاربری را برای کاربران دامنه متعلق به آمازون میزبانی می‌کند، اما می‌توانید آن را سفارشی کنید تا کاربران بتوانند در دامنه‌ای که متعلق به شماست ثبت نام کرده و وارد شوند. این الگو نام دامنه را به data.aws_acm_certificate.wildcard.domain سفارشی می کند. این با استفاده از منبع aws_cognito_user_pool_domain انجام می شود.

در نهایت، باید یک callbackUrl تعریف کنید. این نشانی اینترنتی در برنامه وب شما است که کاربران پس از ورود موفقیت آمیز به آن هدایت می شوند.

نقاط پایانی

پس از پیکربندی User Pool و Application Client، Cognito تعدادی نقطه پایانی را برای شما میزبانی خواهد کرد.

همه اینها تحت دامنه سفارشی که برای Application Client پیکربندی کرده اید میزبانی می شوند.

نقاط پایانی زیر ارائه خواهد شد:

ورود

 https://{domain}/oauth2/authorize

این یک رابط کاربری فراهم می کند که به طور پیش فرض به کاربران اجازه ورود به سیستم را می دهد، اما همچنین به کاربران اجازه می دهد تا ثبت نام کنند یا رمز عبور خود را بازنشانی کنند، یا رمز عبور گم شده را بازیابی کنند. برای شروع جریان ثبت نام OAuth، کاربران را به این صفحه هدایت کنید.

ثبت نام

 https://{domain}/signup

این یک رابط کاربری را فراهم می کند که به طور پیش فرض از کاربران درخواست می کند تا در برنامه ثبت نام کنند.

توکن را دریافت کنید

 https://{domain}/oauth2/token

نقطه پایانی که می‌توانید با POST تماس بگیرید تا توکن‌های Access، Identity و Refresh را به دست آورید، از آنجایی که یک code معتبر در طول جریان احراز هویت ارائه می‌شود.

خروج

 https://{domain}/logout

هدایت مجدد کاربران به این URL از برنامه وب شما، آنها را مجبور به خروج از سیستم می کند.

توجه داشته باشید که تمام این نقاط پایانی باید با استفاده از اطلاعات برنامه شما، Application Client و User Pool پارامتری شوند. الگوی ارائه شده از یک کتابخانه برای ساخت URL های صحیح استفاده می کند. کد منبع برای کتابخانه را می توان در cognitoEndpoints.ts یافت:

 switch (args.endpoint) { case 'authorize': return ( `${baseUrl}/oauth2/authorize?response_type=code` + `&client_id=${deploymentOutput.terraform.user_pool_client_id.value}` + `&redirect_uri=${deployment.configuration.callbackUrl}` + '&code_challenge_method=S256' + `&code_challenge=${await getCodeChallenge()}` ); case 'signup': return ( `${baseUrl}/signup?response_type=code` + `&client_id=${deploymentOutput.terraform.user_pool_client_id.value}` + `&redirect_uri=${deployment.configuration.callbackUrl}` + '&code_challenge_method=S256' + `&code_challenge=${await getCodeChallenge()}` ); case 'token': return `${baseUrl}/oauth2/token`; case 'logout': return ( `${baseUrl}/logout?response_type=code` + `&client_id=${deploymentOutput.terraform.user_pool_client_id.value}` + `&redirect_uri=${deployment.configuration.callbackUrl}` + '&code_challenge_method=S256' + `&code_challenge=${await getCodeChallenge()}` ); }

نحوه ثبت نام و احراز هویت کاربران

هنگامی که Cognito همانطور که در بالا ذکر شد به درستی پیکربندی شد، می توانید شروع به ثبت نام کاربران برای برنامه خود کنید.

راه‌های متعددی برای انجام این کار وجود دارد، اما معمولاً با هدایت کاربران از برنامه وب خود به آدرس‌هایی که در بخش قبل توضیح داده شد شروع می‌کنید.

در این بخش، من به پروژه مثال اشاره می‌کنم: cognito-react-nodejs-example در مقابل پروژه قالب ( cognito-nodejs-template ) که در بخش‌های قبلی به آن اشاره شد.

پروژه نمونه به طور خودکار مانند پروژه الگو به روز نمی شود. اما یک مثال یکپارچه ارائه می‌کند که هم پیکربندی Cognito و هم یک برنامه وب ساده را در بر می‌گیرد، که پیروی از مفاهیم مورد بحث در این بخش را آسان‌تر می‌کند.

من همچنین تعدادی از توابع راحتی را در کتابخانه ای که در npm منتشر می شود پیچیده ام: @goldstack/template-user-management . کد منبع آن کتابخانه در اینجا موجود است.

پروژه نمونه از فضاهای کاری نخ استفاده می کند و شامل دو بسته است:

من فضاهای کاری را دوست دارم زیرا آنها به شما اجازه می دهند برنامه های فول استک را به شیوه ای تمیز و ماژولار توسعه دهید. برای کسب اطلاعات بیشتر در مورد چگونگی و چرایی راه اندازی پروژه، لطفاً به مقاله من در راهنمای نهایی برای TypeScript Monorepos مراجعه کنید.

برنامه ساده ما فقط شامل یک صفحه است که در بسته server-side-rendering تعریف شده است: $index.tsx .

از برنامه نمونه با دکمه های ورود و ثبت نام" width="563" height="238" loading="lazy">

من در زیر منطق کلیدی برای احراز هویت ارائه شده در index handler را مخفف می کنم:

 import { getLoggedInUser, handleRedirectCallback, loginWithRedirect, } from 'user-management'; const Index = (props: { message: string }): JSX.Element => { const user = getLoggedInUser(); handleRedirectCallback(); return ( <> {!user && ( <button onClick={() => { loginWithRedirect(); }} > Sign In </button> )} </> ); };

وارد کردن بسته user-management به شما امکان می دهد به تعدادی از روش های راحت مورد نیاز برای تعامل با Cognito در برنامه وب دسترسی داشته باشید. برای مرجع به ماژول users.ts در بسته user-management مراجعه کنید.

متد getLoggedInUser() هویت و نشانه دسترسی را برای کاربر در صورت ورود کاربر برمی گرداند.

متد handleRedirectCallback() منطقی را انجام می دهد که کلاینت باید برای مراحل جریان مجوز که برگشت به کلاینت را طی می کند طی کند. به طور خاص، روش:

تحلیل می کند که آیا یک پارامتر ?code در URL وجود دارد یا خیر.

در صورت وجود، نقطه پایانی token را با code ارائه شده فراخوانی می کند تا توکن های کاربر (هویت، دسترسی و تازه کردن) را به دست آورد.

از یک نشانه رفرش (در صورت وجود) برای به دست آوردن هویت جدید و دسترسی به نشانه ها استفاده می کند.

اگر کاربر هنوز احراز هویت نشده باشد، روش loginWithRedirect() کاربر را به رابط کاربری ارائه شده Cognito هدایت می کند.

صفحه تعریف شده در $index.tsx از چند روش دیگر استفاده می کند:

signUpWithRedirect() که درست مانند loginWithRedirect() کار می کند، اما رابط کاربری Cognito را به طور پیش فرض برای ثبت نام در مقابل جریان ورود به سیستم قرار می دهد و به دکمه ثبت در برنامه مثال متصل است.

performLogout() که کاربر را از سیستم خارج می کند.

ایمن سازی نقاط پایانی

هنگامی که توکن‌ها را در سمت کلاینت به‌دست آوردید، می‌توانید آنها را به سرور بازگردانید—به‌طور پیش‌فرض الگو آنها را در یک کوکی سمت کلاینت می‌نویسد، اما همچنین می‌توانید آنها را به‌عنوان توکن‌های حامل در سرصفحه‌ها برای درخواست‌های سفارشی ارسال کنید. .

در منطق سمت سرور، می توانید دوباره ماژول user-management را وارد کنید. با استفاده از روش connectWithCognito ، می‌توانید نشانه دسترسی و شناسه ارسال شده از مشتریان را تأیید کنید:

 import { connectWithCognito } from 'user-management'; export const handler: SSRHandler = async (event, context) => { const cookies = getCookies((event.cookies || []).join(';')); if (cookies.goldstack_access_token) { const cognito = await connectWithCognito(); await cognito.validate(cookies.goldstack_access_token); const idToken = await cognito.validateIdToken(cookies.goldstack_id_token); message = `Hello ${idToken.email}<br>`; } };

برای مرجع کامل کد منبع ، کنترل کننده سمت سرور مسیر فهرست را در پروژه مثال ببینید.

توجه داشته باشید که فراخوانی متدهای validate() روی توکن ها بسیار مهم است و نه اینکه فقط مستقیماً آنها را رمزگشایی کنید تا محتوای آنها را بخوانید. API توسعه یافته در این مثال تنها در صورتی ایمن می شود که توکن ها را تأیید کنید.

مدیریت کاربر

هنگامی که کاربران را برای برنامه خود ثبت نام کردید، ممکن است لازم باشد کارهای اداری با آنها انجام دهید - مانند بازنشانی رمز عبور یا صادر کردن فهرست همه کاربران.

شما می توانید این کار را به راحتی با استفاده از کنسول AWS انجام دهید. سرویس Cognito را جستجو کنید و سپس Manage User Pools را انتخاب کنید.

سپس گروه کاربری ایجاد شده را انتخاب کنید و به تنظیمات عمومی / کاربران و گروه ها بروید. در اینجا می توانیم فهرست ی از تمام کاربران ثبت نام شده را مشاهده کنیم:

لطفاً هیچ تنظیمات دیگری را در کنسول AWS تغییر ندهید. تمام تغییرات در پیکربندی استخر کاربر باید با اصلاح فایل های پیکربندی Terraform ارائه شده انجام شود.

نتیجه

بسیاری از برنامه ها نیاز به ثبت نام و شناسایی کاربران دارند. متأسفانه، ارائه ویژگی های احراز هویت کاربر می تواند بسیار پیچیده شود.

در این مقاله، من نحوه ایجاد یک برنامه کاربردی ساده را نشان داده‌ام که به کاربران امکان ثبت نام و ورود امن را می‌دهد.

Amazon Cognito اکثر مشکلات سخت را برای ما حل می کند. به عنوان مثال، پیچیدگی قابل توجهی در رسیدگی به تأیید ایمیل یا قابلیت بازیابی آخرین رمزهای عبور وجود دارد.

با استفاده از راه‌حل‌های پیش‌فرض ارائه‌شده توسط Cognito، عمدتاً رابط کاربری میزبان ، می‌توانید برنامه خود را روشن نگه دارید و روی مشکلات منحصربه‌فردی که می‌خواهید حل کنید تمرکز کنید.

با این حال، مانند هر راه حل خارج از جعبه، شما انعطاف پذیری و توسعه پذیری را قربانی می کنید. پروژه و الگوی نمونه تمام پیکربندی ها را در Terraform ارائه می دهد و می تواند مطابق با نیازهای شما تغییر یابد - اما این همیشه آسان نخواهد بود.

در مجموع، من به شدت توصیه می کنم از یک پلت فرم موجود برای مدیریت هویت مشتری استفاده کنید. اگر به AWS ملزم نیستید، احتمالا Auth0 و Okta به Cognito ارجحیت دارند. برای این مقاله، من Cognito را انتخاب کردم زیرا روی ساخت یک پشته کامل بدون سرور برای AWS کار می‌کردم.

در مقاله‌هایم، فراتر از ارائه تکه‌های کد می‌روم و کتابخانه‌ها و قالب‌هایی را ارائه می‌دهم که به شما در راه‌اندازی و اجرای برنامه‌تان یک شروع عالی می‌دهند. شما می توانید با کمک به من و ایده هایی برای بهبود مقاله یا حتی بهتر، با کمک به بهبود الگو و پروژه نمونه ، سفر را برای دیگران آسان تر کنید.