Flutterで実装するParse Serverのユーザーログイン/ログアウト手法

flutterを使用したparse serverのユーザーログインとログアウト はじめに 前回のガイドでflutterのparseにユーザー登録を実装した後、同じparseuserクラスを使用してユーザーのログインとログアウトを行う方法を学びます。サインアップ後、ログイン操作は自動的に実行され、新しいユーザーセッションが作成されます。ログアウト操作は、ログインしているユーザーのアクティブなセッションオブジェクトを削除します。 このガイドでは、あなたのflutterアプリのために、 parse serverのflutterプラグイン を使用してparseuserクラスによるログイン/ログアウトを実行する方法を学びます。 目標 flutterアプリのためにparseを使用したユーザーログイン/ログアウト機能を構築すること。 前提条件 このチュートリアルを完了するには、次のものが必要です： flutter バージョン 2 2 x 以降 https //flutter dev/docs/get started/install android studio https //developer android com/studio または vs code をインストール (と プラグイン dart と flutter) アプリ 作成された back4app 上 注意 次の 新しい parse アプリのチュートリアル を参照して、back4app で parse アプリを作成する方法を学んでください。 back4app に接続された flutter アプリ。 注意 次の flutter プロジェクトに parse sdk をインストール して、back4app に接続された flutter プロジェクトを作成します。 前のガイドを完了して、次の parseuser parseuser クラスについてより良い理解を得てください。 android または ios を実行しているデバイス（または仮想デバイス）。 ログイン/ログアウトアプリの理解 ログイン/サインアウトプロセスをよりよく理解するために、アプリを作成してユーザーのアカウントにログインおよびログアウトします。 このガイドの主な焦点はflutterとparseの使用であるため、flutterアプリケーションコードについては説明しません。次の手順に従って、back4appデータベースでログインおよびログアウトアプリを構築します。 始めましょう！ 次のステップでは、ログイン/ログアウトアプリを構築できるようになります。 1 ログイン/ログアウトアプリテンプレートを作成する 前のガイドからflutterプロジェクトを開いてください parse server用のflutterプラグイン 。次に、 main dart main dart ファイルに移動し、すべてのコードをクリーンアップして、次の内容に置き換えてください 1 import 'package\ flutter/material dart'; 2 import 'package\ parse server sdk flutter/parse server sdk dart'; 3 4 void main() async { 5 widgetsflutterbinding ensureinitialized(); 6 7 final keyapplicationid = 'your app id here'; 8 final keyclientkey = 'your client key here'; 9 final keyparseserverurl = 'https //parseapi back4app com'; 10 11 await parse() initialize(keyapplicationid, keyparseserverurl, 12 clientkey keyclientkey, debug true); 13 14 runapp(myapp()); 15 } 16 17 class myapp extends statelesswidget { 18 @override 19 widget build(buildcontext context) { 20 return materialapp( 21 title 'flutter login/logout', 22 theme themedata( 23 primaryswatch colors blue, 24 visualdensity visualdensity adaptiveplatformdensity, 25 ), 26 home homepage(), 27 ); 28 } 29 } 30 31 class homepage extends statefulwidget { 32 @override 33 homepagestate createstate() => homepagestate(); 34 } 35 36 class homepagestate extends state\<homepage> { 37 final controllerusername = texteditingcontroller(); 38 final controllerpassword = texteditingcontroller(); 39 bool isloggedin = false; 40 41 @override 42 widget build(buildcontext context) { 43 return scaffold( 44 appbar appbar( 45 title const text('flutter login/logout'), 46 ), 47 body center( 48 child singlechildscrollview( 49 padding const edgeinsets all(8), 50 child column( 51 crossaxisalignment crossaxisalignment stretch, 52 children \[ 53 container( 54 height 200, 55 child image network( 56 'http //blog back4app com/wp content/uploads/2017/11/logo b4a 1 768x175 1 png'), 57 ), 58 center( 59 child const text('flutter on back4app', 60 style 61 textstyle(fontsize 18, fontweight fontweight bold)), 62 ), 63 sizedbox( 64 height 16, 65 ), 66 center( 67 child const text('user login/logout', 68 style textstyle(fontsize 16)), 69 ), 70 sizedbox( 71 height 16, 72 ), 73 textfield( 74 controller controllerusername, 75 enabled !isloggedin, 76 keyboardtype textinputtype text, 77 textcapitalization textcapitalization none, 78 autocorrect false, 79 decoration inputdecoration( 80 border outlineinputborder( 81 borderside borderside(color colors black)), 82 labeltext 'username'), 83 ), 84 sizedbox( 85 height 8, 86 ), 87 textfield( 88 controller controllerpassword, 89 enabled !isloggedin, 90 obscuretext true, 91 keyboardtype textinputtype text, 92 textcapitalization textcapitalization none, 93 autocorrect false, 94 decoration inputdecoration( 95 border outlineinputborder( 96 borderside borderside(color colors black)), 97 labeltext 'password'), 98 ), 99 sizedbox( 100 height 16, 101 ), 102 container( 103 height 50, 104 child textbutton( 105 child const text('login'), 106 onpressed isloggedin ? null () => douserlogin(), 107 ), 108 ), 109 sizedbox( 110 height 16, 111 ), 112 container( 113 height 50, 114 child textbutton( 115 child const text('logout'), 116 onpressed !isloggedin ? null () => douserlogout(), 117 ), 118 ) 119 ], 120 ), 121 ), 122 )); 123 } 124 125 void showsuccess(string message) { 126 showdialog( 127 context context, 128 builder (buildcontext context) { 129 return alertdialog( 130 title const text("success!"), 131 content text(message), 132 actions \<widget>\[ 133 new textbutton( 134 child const text("ok"), 135 onpressed () { 136 navigator of(context) pop(); 137 }, 138 ), 139 ], 140 ); 141 }, 142 ); 143 } 144 145 void showerror(string errormessage) { 146 showdialog( 147 context context, 148 builder (buildcontext context) { 149 return alertdialog( 150 title const text("error!"), 151 content text(errormessage), 152 actions \<widget>\[ 153 new textbutton( 154 child const text("ok"), 155 onpressed () { 156 navigator of(context) pop(); 157 }, 158 ), 159 ], 160 ); 161 }, 162 ); 163 } 164 165 void douserlogin() async { 166 167 } 168 169 void douserlogout() async { 170 171 } 172 } 173 関数の debug debug パラメータが parse() initialize parse() initialize の場合、 true true であれば、parse api コールをコンソールに表示することができます。この設定はコードのデバッグに役立ちます。リリース版ではデバッグを無効にすることをお勧めします。 2 テンプレートを back4app プロジェクトに接続する アプリケーションidとクライアントキーの資格情報を見つけるには、 back4appウェブサイト https //www back4app com/ のアプリダッシュボードに移動します。 コードを更新します main dart main dart に、back4appのプロジェクトのapplicationidとclientkeyの値を使用します。 keyapplicationid = アプリid keyclientkey = クライアントキー プロジェクトを実行すると、アプリが画像のように読み込まれます。 3 ユーザーログインのコード ユーザーログイン機能は、 セッション セッション オブジェクトを作成し、ログインした ユーザー ユーザー を指し、有効なユーザーセッションをローカルストレージに保存します。 将来、 currentuser currentuser のようなメソッドを呼び出すと、あなたの ユーザー ユーザー データと sessiontoken sessiontoken を取得することができます。これは、 セッション セッション オブジェクトが ダッシュボード ダッシュボード で作成されたものです。 ファイル内の関数 douserlogin douserlogin を検索します。 main dart main dart 内のコードを douserlogin douserlogin で置き換えます 1 final username = controllerusername text trim(); 2 final password = controllerpassword text trim(); 3 4 final user = parseuser(username, password, null); 5 6 var response = await user login(); 7 8 if (response success) { 9 showsuccess("user was successfully login!"); 10 setstate(() { 11 isloggedin = true; 12 }); 13 } else { 14 showerror(response error! message); 15 } この機能を構築するには、次の手順に従ってください 新しい parseuser parseuser クラスのインスタンスを作成します。コマンドは parseuser(username, password, null); parseuser(username, password, null); アプリに入力されたデータを使用します。メールフィールドは必要なく、nullで指定する必要があります。 次に、 login login 関数を呼び出します。これにより、 session session がparseダッシュボードのデータベースに作成され、トークンがローカルストレージに保存されます。 ユーザーログインが成功したかどうかを確認します。成功しなかった場合は、エラーメッセージを表示します。 完全な関数は次のようになります 1 void douserlogin() async { 2 final username = controllerusername text trim(); 3 final password = controllerpassword text trim(); 4 5 final user = parseuser(username, password, null); 6 7 var response = await user login(); 8 9 if (response success) { 10 showsuccess("user was successfully login!"); 11 setstate(() { 12 isloggedin = true; 13 }); 14 } else { 15 showerror(response error! message); 16 } 17 } テストするには、android studio/vscodeの run run ボタンをクリックしてください。 希望するユーザーの資格情報を提供した後、すべてが成功した場合、ログインを押すとこのメッセージが表示されます 無効な資格情報でユーザーにログインしようとすると、エラーハンドリングをテストできます パスワードなしでログインしようとすると、別のエラーが発生します 4 ユーザーのログアウトのためのコード ユーザーログアウト機能は、ログイン機能で作成された セッション セッション オブジェクトを削除します。このセッションはデバイス上でクリアされ、あなたのparseサーバーにリンクされたサービスからログアウトします。 関数を検索します douserlogout douserlogout ファイル内で main dart main dart 。の中のコードを置き換えます douserlogout douserlogout で 1 final user = await parseuser currentuser() as parseuser; 2 var response = await user logout(); 3 4 if (response success) { 5 showsuccess("user was successfully logout!"); 6 setstate(() { 7 isloggedin = false; 8 }); 9 } else { 10 showerror(response error! message); 11 } この関数を構築するには、次の手順に従います 関数を使用して現在のログインユーザーを取得します parseuser currentuser() parseuser currentuser() のために呼び出します logout logout 関数 parseuser parseuser オブジェクト、これにより session session がデータベースから削除され、ローカルストレージのトークンがクリアされます。 ユーザーのログアウトが成功したかどうかを確認します。成功しなかった場合は、エラーメッセージを表示します。 完全なコードは次のようになります 1 void douserlogout() async { 2 final user = await parseuser currentuser() as parseuser; 3 var response = await user logout(); 4 5 if (response success) { 6 showsuccess("user was successfully logout!"); 7 setstate(() { 8 isloggedin = false; 9 }); 10 } else { 11 showerror(response error! message); 12 } 13 } テストするには、android studio/vscodeの run run ボタンをクリックします。 希望するユーザー認証情報を提供した後、すべてが成功した場合、ログインを押すとこのメッセージが表示されます 「ログアウト」ボタンをクリックします 完了！ このガイドの最後に、back4appを通じてparse serverのコア機能を使用して、アプリのparseユーザーにログインおよびログアウトできます!