Ionicでのメール認証付きユーザー登録の実装ガイド

メール認証を伴うユーザー登録 イントロダクション このセクションでは、ユーザー登録とメール認証を使用してアプリを作成する方法を説明します。 parse serverのコア機能 をback4appを通じて。 これがどのように見えるかです いつでも、このチュートリアルで構築した完全なionicプロジェクトにアクセスできます。私たちの githubリポジトリ 前提条件 このクイックスタートを完了するには、次のものが必要です： visual studio code （またはお好きなweb ide）。 ionic framework back4appで作成されたアプリ。 次の 新しいparseアプリのチュートリアル をフォローして、back4appでparseアプリを作成する方法を学びます。 次の ユーザー登録 のチュートリアルをフォローして、back4appでサインアップ、ログイン、ログアウトを実装する方法を学びます。 1 セットアップ このチュートリアルでは、前回の ユーザー登録 https //www back4app com/docs/ionic/ionic framework login screen から始めます。 2 メール認証を有効にする アプリに移動して back4appのウェブサイト https //www back4app com/ をクリックします サーバー設定 サーバー設定 「認証メール」ブロックを見つけて 設定 設定 をクリックします。 「認証メール」ブロックはこのようになります 3\ ユーザーのメールを確認 ユーザーのメールを確認 をクリックします。ここにあります 4\ 空のフィールドに入力し、すでに入力されているフィールドを好みに応じて修正します。 5\ 保存 保存 ボタンをクリックします。 3 サインアップ 「 parseuser parseuser 」クラスの2つの基本的な属性は、「 username 」と「 password 」です。もう1つ特別な属性があり、それは「 email 」です。 メール認証を伴うサインアップを実装するには、基本的なユーザー登録と同じ方法を使用します。しかし、今回はユーザーをホームページに送るのではなく、ログインするためにメールを確認するように求めます。 ユーザーの作成が完了すると、自動的にparse「 dashboard dashboard 」に追加され、その「 emailverified 」ブール属性は「 false 」に設定されます。この時点で、ユーザーはあなたのプラットフォームにログインできないはずです。彼/彼女がメールボックスに送信されたリンクをクリックしてメールを確認すると、「 emailverified 」ブール値は自動的に「 true 」に設定され、彼/彼女はあなたのプラットフォームに完全にアクセスできるようになります。 「 signupactivity signupactivity 」を機能させるには、次の手順に従ってください 「 issigningup issigningup 」と「 email email 」の変数を「 login ts login ts 」に追加して、メール入力を切り替えて保持します login ts 1 // parse dependencies 2 email string; 3 issigningup boolean; 「 signup() signup() 」メソッドがメールアドレスをパースの「 user signup() user signup() 」関数に送信するようにします login ts 1 signup() { 2 parse user signup(this username, this password, {email this email}) then((resp) => { 3 console log('signed up successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 this email = ''; 9 10 this toastctrl create({ 11 message 'account created successfully', 12 duration 2000 13 }) present(); 14 15 this issigningup = false; 16 }, err => { 17 console log('error signing in', err); 18 19 this toastctrl create({ 20 message err message, 21 duration 2000 22 }) present(); 23 }); 24 } さて、ユーザーがサインアップしているとき（ issigningup が true に等しい）またはサインインしているとき（ issigningup が false に等しい）にhtml要素を表示/非表示にするために、ビューにその変更を反映させましょう。 login html login html に ngif ngif login html 1 2 e mail 3 4 5 6 7 8 sign up 9 10 11 12 sign in 13 14 15 16 17 18 sign up 19 20 4 ログイン さて、ユーザーを emailverified ページに送信する前に、ブール値の検証を追加しましょう。 ホーム ホーム ページに。 注意 ユーザーが parse user login() parse user login() 関数を呼び出すとログインしますが、メールの確認が完了するまでアプリにアクセスできません。 また、login() を呼び出すとデータベースにセッションオブジェクトが作成されるため、メールを確認していないユーザーがアプリケーションにアクセスしようとするたびに、 parse user logout() parse user logout() を呼び出すことが重要です。そうしないと、 セッション セッション が開いたままになります。 さて、ユーザーがログインするか、メールの確認が必要であるというアラートを受け取るかを決定するために、 emailverified の検証を実装しましょう。 login ts 1 // parse dependencies 2 signin() { 3 parse user login(this username, this password) then((user) => { 4 console log('logged in successfully', user); 5 6 if(user get('emailverified')) { 7 // if you app has tabs, set root to tabspage 8 this navctrl setroot('homepage') 9 } else { 10 parse user logout() then((resp) => { 11 console log('logged out successfully', resp); 12 }, err => { 13 console log('error logging out', err); 14 }); 15 16 this alertctrl create({ 17 title 'e mail verification needed', 18 message 'your e mail address must be verified before logging in ', 19 buttons \['ok'] 20 }) present(); 21 } 22 }, err => { 23 console log('error logging in', err); 24 25 this toastctrl create({ 26 message err message, 27 duration 2000 28 }) present(); 29 }); 30 } 5 アプリをテストする アプリをテストするには、 ionic serve ionic serve を実行し、いくつかのユーザーを作成します。また、メールを確認せずに登録後にログインして、エラーが実際に表示されるかどうかを確認してください。 次のリンクにログインします back4appのウェブサイト。 https //www back4app com/ アプリを見つけて、 ダッシュボード ダッシュボード > コア コア > ブラウザ ブラウザ > ユーザー ユーザー をクリックして、作成したユーザーを確認してください！ 完了しました！ この段階では、parse serverのコア機能を使用して、back4appを通じてメール認証を行い、アプリにログイン、登録、またはログアウトできます！