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

14 分

ionicフレームワークプロジェクトにログイン画面を追加する方法はじめにこのセクションでは、ページを作成し、ionicアプリにサインアップ、サインイン、サインアウトを実装する方法を学びます。これがその見た目です前提条件このクイックスタートを完了するには、次のものが必要です visual studio code https //code visualstudio com/download （またはお好きなweb ide）。 ionicフレームワーク https //ionicframework com/getting started/ back4appで作成されたアプリ。 follow the new parse app tutorial https //www back4app com/docs/get started/new parse app を参照して、back4appでparseアプリを作成する方法を学びます。いつでも、このチュートリアルで構築された完全なionicプロジェクトにアクセスできます。私たちの githubリポジトリ https //github com/back4app/ionic email verification にて。 1 parse sdkをインストールする既存のionicプロジェクトがあると仮定すると、最初に行うべきことはparse sdkをインストールすることです。次のコマンドを実行してインストールできます $ npm install parse 2 アプリの資格情報を設定するあなたの \app component ts\ , \parse\ をインポートし、back4app parseサーバーへの接続を初期化します。 app component html 1 parse initialize("your app id", "your js key"); 2 parse serverurl = 'https //parseapi back4app com/'; キーの見つけ方がわからない場合は、最初のionicチュートリアルを確認してくださいテンプレートから始める https //www back4app com/docs/js framework/ionic/ionic template#setup 3 ログインページを作成するさて、ログインページを作成しましょう。幸運なことに、ionicは私たちのためにすべてを行ってくれます。私たちがする必要があるのは、次のコマンドを実行することだけです $ ionic generate page login このページビューでは、 \ユーザー名\ と \パスワード\ の入力フィールドと、サインアップ用のボタンとサインイン用のボタンの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()\ と \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()\ を参照してください parse documentation https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup 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 documentation https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup これがどのように見えるべきかです。 4 ログアウトを実装するホームページ（またはユーザーがログイン後に移動するページ）に移動し、サインアウトを実装しましょう。まず、home htmlを開いて、サインアウト用のボタンを追加してください。 login html 1 you are logged in! 2 3 4 5 log out 6 7 さて、 \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 documentation https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup このように見えるはずです。 5 ルートページを設定する重要な機能は \parse\ がデバイスにユーザーがログインしているかどうかを記憶することです。つまり、ユーザーがアプリを閉じても、アプリが開いているときにセッションを復元できます。それにより、アプリの初期ページが \loginpage\ になるのか \homepage\ になるのかを決定できます。そのためには、単に \currentasync()\ を呼び出すだけです。それはログインしているユーザーを返すか、 \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 documentation https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup 最後に、すべてが設定されました！この時点で、単に \ionic serve\ を実行すると、サインイン、サインアップ、サインアウト機能が動作し、ログインユーザーを記憶します。