AWS Amplify + React Native Authentication π FULL SETUP
ΠΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΌΡΡ Π·Π°ΠΏΡΠ°ΡΠΈΠ²Π°Π΅ΠΌΡΡ ΡΠ΅ΠΌ, ΡΡΠ΅Π΄ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΎΠ² ΠΌΠΎΠ΅Π³ΠΎ ΠΊΠ°Π½Π°Π»Π° ΠΠΈΠΌΠΊΠ° Π Π΅Π°ΠΊΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ β ΡΡΠΎ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΈ Π°Π²ΡΠΎΡΠΈΠ·Π°ΡΠΈΡ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ React Native. ΠΠΎΡΡΠΎΠΌΡ Ρ ΡΠ΅ΡΠΈΠ» ΠΏΠΎΡΠ²Π΅ΡΠΈΡΡ ΡΡΠΎΠΌΡ Π²ΠΎΠΏΡΠΎΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΡ. ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ ΠΊΠ°ΠΊ ΠΌΡ Π½Π°ΡΠ½Π΅ΠΌ ΠΊΠΎΠ΄ΠΈΡΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ/ΠΠ²ΡΠΎΡΠΈΠ·Π°ΡΠΈΡ.
Π§Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ: Telegram
ΠΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ β ΡΡΠΎ ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ ΡΡΠ±ΡΠ΅ΠΊΡΠ° ΠΈ ΡΠΎΠ³ΠΎ, Π·Π° ΠΊΠΎΠ³ΠΎ ΠΎΠ½ ΠΏΡΡΠ°Π΅ΡΡΡ ΡΠ΅Π±Ρ Π²ΡΠ΄Π°ΡΡ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅ΠΊΠΎΠΉ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ (ΠΎΡΠΏΠ΅ΡΠ°ΡΠΊΠΈ ΠΏΠ°Π»ΡΡΠ΅Π², ΡΠ²Π΅Ρ ΡΠ°Π΄ΡΠΆΠΊΠΈ, Π³ΠΎΠ»ΠΎΡ ΠΈ Ρ Π΄.), Π² ΠΏΡΠΎΡΡΠ΅ΠΉΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ β Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΡΡΡ ΠΈ ΠΏΠ°ΡΠΎΠ»Ρ.
ΠΠ²ΡΠΎΡΠΈΠ·Π°ΡΠΈΡ β ΡΡΠΎ ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π½ΠΎΠΌΠΎΡΠΈΠΉ Π½Π° Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ°Π½Π΅Π΅ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠΉ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ
Π ΠΊΠΎΠ½ΡΠ΅ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, ΠΌΡ Ρ Π²Π°ΠΌΠΈ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΡΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅:
ΠΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΠ²Π»ΡΡΡΡΡ Π½Π΅ΠΎΡΡΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ ΡΠ°ΡΡΡΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ½Π°Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΈ Π²ΠΎΡΠ»ΠΈ Π»ΠΈ ΠΎΠ½ΠΈ Π² ΡΠΈΡΡΠ΅ΠΌΡ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΡΠ΅ΠΌΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ Π²ΠΎΡΠ΅Π΄ΡΠ΅Π³ΠΎ Π² ΡΠΈΡΡΠ΅ΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΡΡΠ΅Π±ΡΡΡΡΡ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΡ Π΄Π»Ρ ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΈΡ Π²Ρ ΠΎΠ΄Π° Π² ΡΠΈΡΡΠ΅ΠΌΡ, ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠΈΡΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΏΠ°ΡΠΎΠ»Π΅ΠΉ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° Π΄ΡΡΠ³ΠΈΡ Π·Π°Π΄Π°Ρ, ΡΠ²ΡΠ·Π°Π½Π½ΡΡ Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ. Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ°ΡΡΠΎ ΡΡΠ΅Π±ΡΡΡ ΡΠ°ΠΊΠΈΡ Π²Π΅ΡΠ΅ΠΉ, ΠΊΠ°ΠΊ OAUTH (ΠΎΡΠΊΡΡΡΠ°Ρ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ), MFA (ΠΌΠ½ΠΎΠ³ΠΎΡΠ°ΠΊΡΠΎΡΠ½Π°Ρ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ) ΠΈ TOTP (ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΏΠ°ΡΠΎΠ»ΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ).
Π ΠΏΡΠΎΡΠ»ΠΎΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΠ»ΠΎΡΡ Π²ΡΡΡΠ½ΡΡ ΡΠ°ΡΠΊΡΡΡΠΈΠ²Π°ΡΡ Π²ΡΠ΅ ΡΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Ρ Π½ΡΠ»Ρ. ΠΠ΄Π½Π° ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠ° Π·Π°Π΄Π°ΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π½ΡΡΡ Ρ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π½Π΅Π΄Π΅Π»ΠΈ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΠΌΠ΅ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎ. Π ΡΡΠ°ΡΡΡΡ, ΡΠ΅Π³ΠΎΠ΄Π½Ρ Π΅ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΠ΅ ΡΠ΅ΡΠ²ΠΈΡΡ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Auth0, Okta ΠΈ Amazon Cognito, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π²ΡΠ΅ ΡΡΠΎ Π΄Π»Ρ Π½Π°Ρ.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΈ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎ Π²Π½Π΅Π΄ΡΠΈΡΡ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ React Native Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Amazon Cognito Ρ AWS Amplify.
Amazon Cognito β ΡΡΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΠΉ ΡΠ΅ΡΠ²ΠΈΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΎΡ AWS. Cognito ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΏΡΠΎΡΡΡΡ ΠΈ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΡΡ ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, Π²Ρ ΠΎΠ΄ Π² ΡΠΈΡΡΠ΅ΠΌΡ, ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π΄ΠΎΡΡΡΠΏΠ°, ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΠΊΠ΅Π½ΠΎΠ² ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. Cognito ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ Π΄ΠΎ ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²Ρ ΠΎΠ΄ Π² ΡΠΈΡΡΠ΅ΠΌΡ Ρ ΠΏΠΎΡΡΠ°Π²ΡΠΈΠΊΠ°ΠΌΠΈ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ, ΡΠ°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Facebook, Google ΠΈ Amazon.
Cognito ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π΄Π²ΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠ°ΡΡΠ΅ΠΉ: ΠΏΡΠ»ΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΏΡΠ»ΠΎΠ² ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.
User Pools β ΠΏΡΠ»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π·Π°ΡΠΈΡΠ΅Π½Π½ΡΠΉ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΡΠ°Π½ΠΈΡ Π²ΡΠ΅Ρ Π²Π°ΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ Π΄ΠΎ ΡΠΎΡΠ΅Π½ ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. ΠΡΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΠΉ ΡΠ΅ΡΠ²ΠΈΡ. ΠΠ°ΠΊ Π±Π΅ΡΡΠ΅ΡΠ²Π΅ΡΠ½Π°Ρ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΠΏΡΠ»Ρ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ, Π½Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΡΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π»ΡΠ±ΡΡ ΠΈΠ½ΡΡΠ°ΡΡΡΡΠΊΡΡΡΡ. ΠΡΠ»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ β ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π²ΡΠ΅ΠΌΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΡΡΡΡ ΠΈ Π²Ρ ΠΎΠ΄ΡΡ Π² ΡΡΠ΅ΡΠ½ΡΡ Π·Π°ΠΏΠΈΡΡ, ΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ°ΡΡΡΡ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΡ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΠΌΡΡ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅.
Identity pools β ΠΏΡΠ»Ρ ΡΠ΄ΠΎΡΡΠΎΠ²Π΅ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²Π°ΠΌ Π°Π²ΡΠΎΡΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, Π²ΠΎΡΠ΅Π΄ΡΠΈΡ Π² Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π΄Π»Ρ Π΄ΠΎΡΡΡΠΏΠ° ΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ΅ΡΠ²ΠΈΡΠ°ΠΌ AWS. ΠΠΎΠΏΡΡΡΠΈΠΌ, Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄ΠΎΡΡΡΠΏ ΠΊ Π»ΡΠΌΠ±Π΄Π°-ΡΡΠ½ΠΊΡΠΈΠΈ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΠΌΠΎΠ³ ΠΏΠΎΠ»ΡΡΠ°ΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· Π΄ΡΡΠ³ΠΎΠ³ΠΎ API. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠΎ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΏΡΠ»Π° ΡΠ΄ΠΎΡΡΠΎΠ²Π΅ΡΠ΅Π½ΠΈΠΉ. Π ΠΏΡΠ»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π²Ρ ΠΎΠ΄ΠΈΡ ΡΠΎ, ΡΡΠΎ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠΌ ΡΡΠΈΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΡΠ» ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Cognito ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Facebook ΠΈΠ»ΠΈ Google.
Π‘ΡΠ΅Π½Π°ΡΠΈΠΉ, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠ» ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Amazon Cognito ΠΈ ΠΏΡΠ» ΡΠ΄ΠΎΡΡΠΎΠ²Π΅ΡΠ΅Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅.
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ ΡΡ Π΅ΠΌΡ Π΄Π»Ρ ΠΎΠ±ΡΠ΅Π³ΠΎ ΡΡΠ΅Π½Π°ΡΠΈΡ Amazon Cognito. ΠΠ΄Π΅ΡΡ ΡΠ΅Π»Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π΅ΠΌΡ Π΄ΠΎΡΡΡΠΏ ΠΊ Π΄ΡΡΠ³ΠΎΠΌΡ ΡΠ΅ΡΠ²ΠΈΡΡ AWS.
- ΠΠ° ΠΏΠ΅ΡΠ²ΠΎΠΌ ΡΡΠ°ΠΏΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π²Ρ ΠΎΠ΄ΠΈΡ Π² ΡΠΈΡΡΠ΅ΠΌΡ ΡΠ΅ΡΠ΅Π· ΠΏΡΠ» ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠΊΠ΅Π½Ρ ΠΏΡΠ»Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΏΠΎΡΠ»Π΅ ΡΡΠΏΠ΅ΡΠ½ΠΎΠΉ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.
- ΠΠ°ΡΠ΅ΠΌ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΠΌΠ΅Π½ΠΈΠ²Π°Π΅Ρ ΡΠΎΠΊΠ΅Π½Ρ ΠΏΡΠ»Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π½Π° ΡΡΠ΅ΡΠ½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ AWS ΡΠ΅ΡΠ΅Π· ΠΏΡΠ» ΡΠ΄ΠΎΡΡΠΎΠ²Π΅ΡΠ΅Π½ΠΈΠΉ.
- ΠΠ°ΠΊΠΎΠ½Π΅Ρ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π·Π°ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ ΡΡΠ΅ΡΠ½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ AWS Π΄Π»Ρ Π΄ΠΎΡΡΡΠΏΠ° ΠΊ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ΅ΡΠ²ΠΈΡΠ°ΠΌ AWS, ΡΠ°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ Amazon S3 ΠΈΠ»ΠΈ DynamoDB.
Cognito User Pools ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΡΠ΅ΠΌΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π²ΡΠ·ΡΠ²Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ Π΄Π»Ρ ΡΠ»ΡΠΆΠ±Ρ Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²ΡΠ΅ΠΌΠΈ Π°ΡΠΏΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ°ΠΊΠΈΠ΅ Π²Π΅ΡΠΈ, ΠΊΠ°ΠΊ:
- Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ
- ΠΡ ΠΎΠ΄ Π² ΡΠΈΡΡΠ΅ΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ
- ΠΡΡ ΠΎΠ΄ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ
- Π‘ΠΌΠ΅Π½Π° ΠΏΠ°ΡΠΎΠ»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ
- Π‘Π±ΡΠΎΡ ΠΏΠ°ΡΠΎΠ»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ
- ΠΠΎΠ΄ΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° MFA
- ΠΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΡ Amazon Cognito Ρ AWS Amplify
AWS Amplify ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Amazon Cognito ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ. ΠΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ΅ΡΠ²ΠΈΡΡ Amazon Cognito Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΈΠ· ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ AWS Amplify. Π‘ΠΎΠ·Π΄Π°Π² ΡΠ»ΡΠΆΠ±Ρ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΠ΅ΡΠ΅Π· CLI, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ·ΡΠ²Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, signUp, signIn ΠΈ signOut) ΠΈΠ· ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ JavaScript Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Amplify JavaScript.
Amplify ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²ΡΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ΅Π»ΡΠ΅ ΠΏΠΎΡΠΎΠΊΠΈ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π²ΡΠ΅Π³ΠΎ Π·Π° ΠΏΠ°ΡΡ ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π° Π΄Π»Ρ ΡΠ°ΠΊΠΈΡ ΡΡΠ΅Π΄, ΠΊΠ°ΠΊ React, React Native, Vue ΠΈ Angular.
ΠΡ ΡΠΏΡΠΎΡΠΈΡΠ΅ ΠΈ ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΆΠ΅ ΡΡΠΎ Π²ΡΠ΅ ΡΡΠΎΠΈΡ?
ΠΠ»Π°ΡΠΈΡΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Π·Π° ΡΠΎ, ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ΡΡ. ΠΠΈΠΊΠ°ΠΊΠΈΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΠΏΠ»Π°ΡΠ΅ΠΆΠ΅ΠΉ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ Amazon Cognito Identity Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠ»Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, Π²Ρ ΠΏΠ»Π°ΡΠΈΡΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Π·Π° ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π°ΠΊΡΠΈΠ²Π½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π² ΠΌΠ΅ΡΡΡ (MAU). MAU β ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°Π»Π΅Π½Π΄Π°ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΡΠ° Π²ΡΠΏΠΎΠ»Π½ΠΈΠ»ΠΈ Ρ ΠΎΡΡ Π±Ρ ΠΎΠ΄Π½Ρ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ: ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ, Π°Π²ΡΠΎΡΠΈΠ·Π°ΡΠΈΡ, ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΠΊΠ΅Π½Π° ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΠ°ΡΠΎΠ»Ρ. ΠΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΡΡΠΈΠΈ Π°ΠΊΡΠΈΠ²Π½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈ Π½Π΅Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π² ΡΡΠΎΠΌ ΠΊΠ°Π»Π΅Π½Π΄Π°ΡΠ½ΠΎΠΌ ΠΌΠ΅ΡΡΡΠ΅ Π½Π΅ ΠΎΠΏΠ»Π°ΡΠΈΠ²Π°ΡΡΡΡ.
CODING TIME π¨πΌβπ»π©π»βπ»
PART 1
ΠΠ΅ΡΡ ΠΊΠΎΠ΄ Π΄Π»Ρ ΡΡΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π½Π° Github.
ΠΠΈΠ΄Π΅ΠΎ ΠΏΠΎ ΡΡΠΎΠΉ ΡΠ°ΡΡΠΈ:
Step 1
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π½ΠΎΠ²ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ βοΈ
react-native init messaga
ΠΠ°ΠΏΡΡΠΊΠ°Π΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡ π
iOS
cd messaga && react-native run-ios
Android
cd messaga && react-native run-android
Step 2
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΠΈΠΊΠΎΠ½ΠΊΠΈ πΎ
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ AWS Amplify, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΠΈΡ
ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ ΡΡΠΎΠΉ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ π.
ΠΡΠΎΠ²Π΅ΡΡΠ΅ΠΌ Π½Π°Π»ΠΈΡΠΈΠ΅ ΠΎΡΠΈΠ±ΠΎΠΊ. ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π² App.js
import Icon from 'react-native-vector-icons/FontAwesome5'const App = () => {
return (
<>
<Icon name="comments" size={30} color="#900" />
</>
)
}
Step 3
Π Π΅Π³ΠΈΡΡΡΠΈΡΡΠ΅ΠΌ ΡΠ²ΠΎΠΉ AWS account
Π Π΅Π³Π΅ΡΡΡΠΈΡΡΠ΅ΠΌΡΡ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ ΡΡΠΎΠΉ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ π ΠΈ ΠΏΠΎ Π²ΠΈΠ΄Π΅ΠΎΡΡΠ΅Π±Π½ΠΈΠΊΡπΊ ΡΠ΅ΠΊΠ°Π΅ΠΌ Π²ΡΠ΅ 5 ΡΠ°Π³ΠΎΠ².
ΠΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅!!! ΠΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π±Π°Π½ΠΊΠΎΠ²ΡΠΊΠ°Ρ ΠΊΠ°ΡΡΠ° π³, Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π±ΠΎΠ»Π΅Π΅ 1$ π΅
Π’Π°ΠΌ ΠΆΠ΅ ΡΠΌΠΎΡΡΠΈΠΌ ΠΈ ΡΡΠ°Π²ΠΈΠΌ Amplify Command Line Interface (CLI)
Step 4
ΠΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΡ AWS Amplify Π² ΠΏΡΠΎΠ΅ΠΊΡ React Native
Π ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ° React Native ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΠΌ Π½Π°Ρ Π±ΡΠΊΠ΅Π½Π΄
amplify init
ΠΡΠ²Π΅ΡΠ°Π΅ΠΌ Π½Π° Π²ΠΎΠΏΡΠΎΡΡ:
ΠΠ°Π»ΡΡΠ΅ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° π
β § Initializing project in the cloudβ¦
Your project has been successfully initialized and connected to the cloud!
Step 5
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΠΏΠ»Π°Π³ΠΈΠ½ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ β Auth π
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΎΠ±Π»Π°ΠΊΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΈ Π²ΠΎΠΉΡΠΈ Π² ΡΠΈΡΡΠ΅ΠΌΡ.
ΠΠΎΠΌΠ°Π½Π΄ΠΎΠΉ
amplify add auth
ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΠΏΠ»Π°Π³ΠΈΠ½ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ. ΠΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ ΡΠ΅ΡΡΡΡΠΎΠ² auth Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ Π² Π²Π°Ρ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ ampify/backend/auth
ΠΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΏΡΠΎΡΠΈΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. default. Enter ΠΈ ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π±ΡΠ΄ΡΡ Π²Ρ ΠΎΠ΄ΠΈΡΡ Π² ΡΠΈΡΡΠ΅ΠΌΡ. Email(ΠΠ° SMS ΡΠΏΠΈΡΡΠ²Π°ΡΡ Π΄Π΅Π½ΡΠ³ΠΈ).
Successfully added resource yourname locally
ΠΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΠΎΠ±Π»Π°ΠΊΠΎ π
amplify push
β All resources are updated in the cloud
Step 6
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ AWS Amplify Π² ΠΏΡΠΎΠ΅ΠΊΡ React Native βοΈ
ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ Π² ΡΡΠΎΠΉ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ π, Π° ΠΊΠΎΡΠΎΡΠΊΠΎ ΠΈ ΠΏΠΎ ΠΏΡΡΠΌΠΎΠΉ ΡΠ°ΠΊ:
yarn add aws-amplify @aws-amplify/core aws-amplify-react-native amazon-cognito-identity-js @react-native-community/netinfo
ΠΠΎΡΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π·Π°Ρ ΠΎΠ΄ΠΈΠΌ Π² ΠΏΠ°ΠΏΠΊΡ ios ΠΈ ΡΡΠ°Π²ΠΈΠΌ ΠΏΠΎΠ΄Ρ
cd ios && pod install && cd ..
Step 7
Π Π΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌ ΡΡΡΡΠΊΡΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ /src ΠΈ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΠΌ ΡΡΠ΄Π° ΡΠ°ΠΉΠ» App.js, ΠΏΠ΅ΡΠ΅ΠΈΠΌΠ΅Π½ΠΎΠ²ΡΠ²Π°Ρ Π΅Π³ΠΎ Π² index.js
ΠΡΠ°Π²ΠΈΠΌ ΠΈΠΌΠΏΠΎΡΡ Π² /messaga/index.js ΠΈ ΡΠΊΡΡΠ²Π°Π΅ΠΌ Π±ΡΠ΄ΡΡΠΈΠ΅ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΡ.
Step 8
ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈ ΠΌΠΎΠ΄ΡΠ»Ρ Authenticator
Amplify.configure β ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°
Authenticator β ΠΠΎΠ΄ΡΠ»Ρ AWS Amplify Authentication ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ API-ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΡ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ.
ΠΠ°ΠΏΡΡΠΊΠ°Π΅ΠΌ ΡΠΈΠΌΡΠ»ΡΡΠΎΡ
Step 9
ΠΡΠ°Π²ΠΈΠΌ ΠΈΠ½ΠΏΡΡΡ Π² App.js
Step 10
ΠΠ΅Π½ΡΠ΅ΠΌ ΡΠ΅ΠΌΡ UI π
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠΎΡΠΊΡ ΡΠΊΡΠΏΠΎΡΡΠ° Π½Π°ΡΠΈΡ Π±ΡΠ΄ΡΡΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² /src/components/index.js Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ΠΌ
export * from './AmplifyTheme'
ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½ΠΎ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠ°ΠΌ ΡΠ°ΠΉΠ» /src/components/AmplifyTheme/index.js ΡΠ΅ΠΌΡ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ΠΌ
Π ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΡΠ΅ΠΌΡ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Authenticator src/index.js
Step 11
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΡΡΡΡΠΊΠΈΠΉ ΡΠ·ΡΠΊ π·πΊ
ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠΊΡΠΏΠΎΡΡ Π² /src/components/index.js
export * from './Localei18n'
CΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠ°ΠΌ ΡΠ°ΠΉΠ» /src/components/Localei18n/index.js Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ΠΌ
Π ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Localei18n Π² src/index.js
PART 2
ΠΠ΅ΡΡ ΠΊΠΎΠ΄ Π΄Π»Ρ ΡΡΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π½Π° Github.
ΠΠΎ ΠΏΠ΅ΡΠ²ΡΡ Π² ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Amplify Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ
Data is stored unencrypted when using standard storage adapters (
localStorage
in the browser andAsyncStorage
on React Native). Amplify gives you the option to use your own storage object to persist data. With this, you could write a thin wrapper around libraries like:
react-native-keychain
react-native-secure-storage
Expoβs secure store
ΡΡΠΎ Π΄Π°Π½Π½ΡΠ΅ Ρ ΡΠ°Π½ΡΡΡΡ Π² Π½Π΅ Π·Π°ΡΠΈΡΡΠΎΠ²Π°Π½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅, Π° ΡΡΠΎ ΡΠΈΡΠΊ π· ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈ Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌΠΈ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΡΠΌΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΡΠΌΠΈ πΈ.
ΠΠΎ Π²ΡΠΎΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ UI ΠΎΡ Amplify Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΡΠ΅Ρ UX ΠΏΡΠΈΡ ΠΎΠ΄ΡΡΠΈΠΉ ΡΠΎ ΡΡΠΎΡΠΎΠ½Ρ Π·Π°ΠΊΠ°Π·ΡΠΈΠΊΠ°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ ΡΠ΅ΡΠΈΠΌ ΡΡΠΈ Π΄Π²Π΅ Π·Π°Π΄Π°ΡΠΈ Π² ΡΡΠΎΠΉ ΡΠ°ΡΡΠΈ.
Step 1
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ UI Kit, Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ.
Step 2
Π‘ΡΠ°Π²ΠΈΠΌ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ react-navigation, ΡΠ°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ Π·Π΄Π΅ΡΡ (Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ):
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack
ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΏΠΎΠ΄Ρ ΠΏΠΎΠ΄ iOS
cd ios && pod install && cd ..
π Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΏΠΎΡΠ»Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ iOS ΠΈ Android, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠΎΠΌ Π½Π΅ ΠΈΡΠΊΠ°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΈΠ·-Π·Π° ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ°Π΄Π°Π΅Ρ.
Step 3
Π‘ΡΠ°Π²ΠΈΠΌ react-native-keychain
ΠΠ΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΠ΅ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ΅ ΠΊΠ»ΡΡΠ΅ΠΉ react-native-keychain Π΄Π»Ρ React Native.
yarn add react-native-keychain
Π Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΏΠΎΠ΄Ρ ΠΏΠΎΠ΄ iOS
cd ios && pod install && cd ..
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ react-native-keychain
Π‘ΠΎΠ³Π»Π°ΡΠ½ΠΎ ΡΠΎΠΌΡ, ΡΡΠΎ Π½Π°ΠΌ Π³ΠΎΠ²ΠΎΡΠΈΡ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½Π°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ:
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Ρ AWS Amplify Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡ ΡΠΎΠΊΠ΅Π½Ρ Amazon Cognito Π²ΡΡΡΠ½ΡΡ. Π’ΠΎΠΊΠ΅Π½Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ. Π’ΠΎΠΊΠ΅Π½Ρ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ IdToken ΠΈΠ»ΠΈ AccessToken, Ρ ΡΠ°Π½ΡΡΡΡ Π² localStorage Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ Π² AsyncStorage Π΄Π»Ρ React Native. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Ρ ΡΠ°Π½ΠΈΡΡ ΡΡΠΈ ΡΠΎΠΊΠ΅Π½Ρ Π² Π±ΠΎΠ»Π΅Π΅ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Amplify Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΡΠ΅ΡΠ²Π΅ΡΠ°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ ΡΡΠΈΡ ΡΠΎΠΊΠ΅Π½ΠΎΠ².
ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠΈΡΡΠ΅ΠΌ Π½Π°Ρ src/index.js
Step 4
ΠΠΎΠ½ΡΡΠ°Π½ΡΡ
Π§ΡΠΎΠ±Ρ Π½Π΅ ΠΊΠΎΠΏΠΈΠΏΠ°ΡΡΠΈΡΡ ΠΎΠ΄Π½ΠΈ ΠΈ ΡΠ΅ ΠΆΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΌΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠ°ΠΉΠ» Ρ ΠΊΠΎΠ½ΡΡΠ°Π½ΡΠ°ΠΌΠΈ Π΄Π»Ρ ΠΎΠ±ΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°Ρ src/constants.js
Step 5
AppNavigator
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠ°ΠΉΠ» Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠ΅ΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π΄Π»Ρ Π½Π°ΡΠ΅ΠΉ ΠΊΠ°ΡΡΠΎΠΌΠ½ΠΎΠΉ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ src/AppNavigator.js
Step 6
Hello screen
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠΎΡΠΊΡ Π²Ρ ΠΎΠ΄Π°, Π³Π΄Π΅ Π±ΡΠ΄ΡΡ Π»Π΅ΠΆΠ°ΡΡ Π½Π°ΡΠΈ ΡΠΊΡΠ°Π½Ρ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ src/screens/Authenticator/index.js , Π³Π΄Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΡΠΊΡΠ°Π½ ΠΏΡΠΈΠ²Π΅ΡΡΠ²ΠΈΡ
export * from './Hello'
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠΊΡΠ°Π½ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΠΈΡ src/screens/Authenticator /Hello/index.js Π Ρ ΡΠΊΠ΅ useEffect ΠΌΡ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΠΌ ΠΏΡΠΎΠ²Π΅ΡΠΊΡ Π½Π° Π½Π°Π»ΠΈΡΠΈΠ΅ ΡΠΎΠΊΠ΅Π½Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π³Π΄Π΅ Π² ΡΠ»ΡΡΠ°Π΅ true ΠΌΡ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΡ Π½Π° ΡΠΊΡΠ°Π½ User, Π° Π² ΡΠ»ΡΡΠ°Π΅ false ΠΎΡΡΠ°Π΅ΠΌΡΡ Π½Π° ΡΡΠΎΠΌ ΡΠΊΡΠ°Π½Π΅.
Π‘ΠΎΠ±ΠΈΡΠ°Π΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π²ΡΡΡΠ΅ΡΠ°Π΅ΠΌ ΡΠΊΡΠ°Π½ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΠΈΡ.
Step 7
SIGN UP
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠΊΡΠ°Π½ ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ SIGN_UP src/screens/Authenticator/SignUp/index.js , Π³Π΄Π΅ Π΄Π»Ρ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄ Auth.signUp
Step 8
CONFIRM SIGN UP
ΠΠΎΡΠ»Π΅ ΡΡΠΏΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠ²Π΅ΡΠ° Ρ ΡΠ΅ΡΠ²Π΅ΡΠ°, ΠΌΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ Π½Π° ΡΠΊΡΠ°Π½ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΡ ΠΈ Π²Π²ΠΎΠ΄Π° ΠΊΠΎΠ΄Π°, ΠΏΡΠΈΡΠ΅Π΄ΡΠ΅Π³ΠΎ Π½Π°ΠΌ Π½Π° ΠΏΠΎΡΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠΊΡΠ°Π½ CONFIRM_SIGN_UP src/screens/Authenticator/ConfirmSignUp/index.js
RESEND CODE
ΠΡΠ»ΠΈ ΠΊΠΎΠ΄ Π½Π΅ ΠΏΡΠΈΡΠ΅Π», ΡΠΎ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ ΠΊΠΎΠ΄ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Resend code? ΠΌΡ Π²Π΅ΡΠ°Π΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄ Auth.resendSignUp(userInfo.email)
Π ΡΠ»ΡΡΠ°Π΅ ΡΡΠΏΠ΅ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π° ΠΌΠ΅ΡΠΎΠ΄Π°
Auth.confirmSignUp(email, code, { forceAliasCreation: true })
ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΠ·ΡΠ²Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄
Auth.signIn(email, password)
Step 9
USER
ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ ΡΡΠΏΠ΅Ρ Π° ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ Π½Π° ΡΠΊΡΠ°Π½ USER, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ c ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Π²ΡΡ ΠΎΠ΄Π° ΠΈΠ· ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΎΡΠΈΡΡΠΊΠΎΠΉ ΡΠΎΠΊΠ΅Π½ΠΎΠ² src/screens/Authenticator/User/index.js
Step 10
SIGN IN
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ·Π΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π²ΠΎΠΉΡΠΈ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π· Π»ΠΎΠ³ΠΈΠ½ ΠΈ ΠΏΠ°ΡΠΎΠ»Ρ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠΊΡΠ°Π½ SIGN_IN src/screens/Authenticator/SignIn/index.js
Π ΡΠ»ΡΡΠ°Π΅ ΡΡΠΏΠ΅Ρ Π°, ΠΌΡ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌ ΡΠ·Π΅ΡΠ° Π½Π° ΡΠΊΡΠ°Π½ USER, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠΆΠ΅ ΡΠ°Π½Π΅Π΅ ΡΠ΄Π΅Π»Π°Π»ΠΈ, Π° Π΅ΡΠ»ΠΈ ΡΠ·Π΅Ρ Π·Π°Π±ΡΠ» ΠΈΠ»ΠΈ Π½Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π²Π²Π΅Π» ΠΏΠ°ΡΠΎΠ»Ρ, ΡΠΎ ΠΌΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΎΡΠΈΠ±ΠΊΡ Forgot Password? ΠΈ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌ ΡΠ±ΡΠΎΡΠΈΡΡ ΠΏΠ°ΡΠΎΠ»Ρ.
Step 11
FORGOT
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠΊΡΠ°Π½ FORGOT src/screens/Authenticator/Forgot/index.js
Step 12
FORGOT PASSWORD SUBMIT
ΠΠΎΡΠ»Π΅ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΡ e-mail, ΠΌΡ Π²ΡΠ·ΡΠ²Π°Π΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄ Auth.forgotPassword(email) ΠΈ Π² ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠΉ ΡΠ·Π΅Ρ Π΅ΡΡΡ, ΡΠΎ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° ΡΠΊΡΠ°Π½ FORGOT_PASSWORD_SUBMIT src/screens/Authenticator/ForgotPassSubmit/index.js
Π³Π΄Π΅ ΠΏΠΎΡΠ»Π΅ Π²Π²ΠΎΠ΄Π° ΠΊΠΎΠ΄Π°, ΠΎΡΠΏΡΠ°Π²Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π½Π° ΠΏΠΎΡΡΡ, Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠ°ΡΠΎΠ»Ρ ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΡ, ΠΌΡ Π²ΡΠ·ΡΠ²Π°Π΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄ ΡΠΌΠ΅Π½Ρ ΠΏΠ°ΡΠΎΠ»Ρ Auth.forgotPasswordSubmit(email, code, password) ΡΡΠΏΠ΅Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ·Π΅ΡΠ° Π½Π° ΡΠΊΡΠ°Π½ USER.
Step 13
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π²ΡΠ΅ ΡΠΎΠ·Π΄Π°Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π² src/screens/Authenticator/index.js
export * from './Hello'
export * from './User'
export * from './SignIn'
export * from './SignUp'
export * from './Forgot'
export * from './ForgotPassSubmit'
export * from './ConfirmSignUp'
Step 14
Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠ°ΠΉΠ» ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ:
Step 15
Clean Up
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΡ ΡΠ΅ΠΌΡ, ΡΠΎ ΡΠ΄Π°Π»ΡΠ΅ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ AmplifyTheme ΠΈ Localei18n
Step 16
Debug
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Ρ ΡΠΎΠΊΠ΅Π½Π°ΠΌΠΈ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π² ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ /index.js
window.LOG_LEVEL = 'DEBUG'
π Π’ΠΎΠ»ΡΠΊΠΎ Π½Π΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ ΡΠ΄Π°Π»ΠΈΡΡ, ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΡΠ΅ Π²ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΡΠΎΡΡ.
Doneβ
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ Π§Π°ΡΡΡ II β CRUD (Create Read Update Delete) AWS Amplify(AppSync) + React Native π°
REFERENCES: