Ionicでのログイン画面実装ガイド：Back4App使用法

ionicフレームワークプロジェクトにログイン画面を追加する方法 はじめに このセクションでは、ページを作成し、ionicアプリにサインアップ、サインイン、サインアウトを実装する方法を学びます。 これがその見た目です 前提条件 このクイックスタートを完了するには、次のものが必要です visual studio code （またはお好きなweb ide）。 ionicフレームワーク back4appで作成されたアプリ。 follow the new parse app tutorial を参照して、back4appでparseアプリを作成する方法を学びます。 いつでも、このチュートリアルで構築された完全なionicプロジェクトにアクセスできます。私たちの githubリポジトリ にて。 1 parse sdkをインストールする 既存のionicプロジェクトがあると仮定すると、最初に行うべきことはparse sdkをインストールすることです。次のコマンドを実行してインストールできます 2 アプリの資格情報を設定する あなたの app component ts app component ts , parse parse をインポートし、back4app parseサーバーへの接続を初期化します。 app component html 1 parse initialize("your app id", "your js key"); 2 parse serverurl = 'https //parseapi back4app com/'; キーの見つけ方がわからない場合は、最初のionicチュートリアルを確認してください テンプレートから始める 3 ログインページを作成する さて、ログインページを作成しましょう。幸運なことに、ionicは私たちのためにすべてを行ってくれます。私たちがする必要があるのは、次のコマンドを実行することだけです このページビューでは、 ユーザー名 ユーザー名 と パスワード パスワード の入力フィールドと、サインアップ用のボタンとサインイン用のボタンの2つを追加する必要があります。 login html 1 insert your credentials 2 3 4 username 5 6 7 8 9 password 10 11 12 13 14 15 sign up 16 17 18 19 sign in 20 21 では、 signin() signin() と signup() signup() メソッドを実装しましょう。 ログイン ログイン ビューで言及されている。 login ts 1 signup() { 2 parse user signup(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 9 this toastctrl create({ 10 message 'account created successfully', 11 duration 2000 12 }) present(); 13 }, err => { 14 console log('error signing in', err); 15 16 this toastctrl create({ 17 message err message, 18 duration 2000 19 }) present(); 20 }); 21 } 詳細については signup() signup() を参照してください parse documentation login ts 1 signin() { 2 parse user login(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // if you app has tabs, set root to tabspage 6 this navctrl setroot('homepage') 7 }, err => { 8 console log('error logging in', err); 9 10 this toastctrl create({ 11 message err message, 12 duration 2000 13 }) present(); 14 }); 15 } 詳細については parse user login() parse user login() を参照してください parse documentation これがどのように見えるべきかです。 4 ログアウトを実装する ホームページ（またはユーザーがログイン後に移動するページ）に移動し、サインアウトを実装しましょう。 まず、home htmlを開いて、サインアウト用のボタンを追加してください。 login html 1 you are logged in! 2 3 4 5 log out 6 7 さて、 logout() logout() メソッドを実装し、リクエストが失敗した場合に トースト トースト コンポーネントを追加しましょう。 home ts 1 logout() { 2 parse user logout() then((resp) => { 3 console log('logged out successfully', resp); 4 5 this navctrl setroot('loginpage'); 6 }, err => { 7 console log('error logging out', err); 8 9 this toastctrl create({ 10 message 'error logging out', 11 duration 2000 12 }) present(); 13 }) 14 } 詳細については parse user logout() parse user logout() を参照してください parse documentation このように見えるはずです。 5 ルートページを設定する 重要な機能は parse parse がデバイスにユーザーがログインしているかどうかを記憶することです。つまり、ユーザーがアプリを閉じても、アプリが開いているときにセッションを復元できます。 それにより、アプリの初期ページが loginpage loginpage になるのか homepage homepage になるのかを決定できます。 そのためには、単に currentasync() currentasync() を呼び出すだけです。それはログインしているユーザーを返すか、 null null を返します。 app component ts 1 parse user currentasync() then(user => { 2 console log('logged user', user); 3 4 this rootpage = user ? 'homepage' 'loginpage'; 5 }, err => { 6 console log('error getting logged user'); 7 8 this rootpage = 'loginpage'; 9 }) 詳細については parse user currentasync() parse user currentasync() を参照してください parse documentation 最後に、すべてが設定されました！ この時点で、単に ionic serve ionic serve を実行すると、サインイン、サインアップ、サインアウト機能が動作し、ログインユーザーを記憶します。