Flutterを使用したParseサーバーでのユーザー登録方法

parse serverを使用したflutterのユーザー登録 はじめに 多くのアプリの中心には、ユーザーが自分の情報に安全にアクセスできるようにするユーザーアカウントの概念があります。parseは、ユーザーアカウント管理に必要な機能の多くを自動的に処理する特化した ユーザークラス ユーザークラス を提供します。このクラスを使用することで、アプリにユーザーアカウント機能を追加できます。 parseuser parseuser は parseobject parseobject のサブクラスであり、同じ機能を持っています。parseobjectにあるすべてのメソッドはparseuserにも存在します。違いは、 parseuser parseuser にはユーザーアカウントに特有の特別な追加機能があることです。 parseuser parseuser にはparseobjectとは異なるいくつかのプロパティがあります。 username ユーザーのユーザー名（必須）。 password ユーザーのパスワード（サインアップ時に必須）。 email ユーザーのメールアドレス（任意）。 ユーザー名として メールアドレス メールアドレス を使用することができます。ユーザーに ユーザー名 ユーザー名 を入力するように依頼してください。 メール メール を入力させますが、 ユーザー名 ユーザー名 プロパティに記入してください。parseuserは通常通り機能します。 このガイドでは、 parse server用のflutterプラグイン を使用して、 parseuser parseuser クラスを使用して、flutterアプリのユーザー登録機能を作成する方法を学びます。 目標 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プロジェクトを作成してください。 androidまたはiosを実行しているデバイス（または仮想デバイス）。 サインアップアプリの理解 サインアッププロセスをよりよく理解するために、ユーザーデータを登録し、アカウントを作成するアプリを作成します。このガイドの主な焦点はflutterとparseの使用であるため、flutterアプリケーションコードの説明は行いません。次のステップに従って、back4appデータベースにタスクを保存するtodoアプリを構築します。 さあ、始めましょう！ 次のステップに従うことで、back4appデータベースにユーザーアカウントを作成するサインアプリを構築できるようになります。 1 サインアプリテンプレートを作成する 前のガイドからflutterプロジェクトを開きます flutterプラグイン for parse server 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 signup', 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 final controlleremail = texteditingcontroller(); 40 41 @override 42 widget build(buildcontext context) { 43 return scaffold( 44 appbar appbar( 45 title const text('flutter signup'), 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 registration', 68 style textstyle(fontsize 16)), 69 ), 70 sizedbox( 71 height 16, 72 ), 73 textfield( 74 controller controllerusername, 75 keyboardtype textinputtype text, 76 textcapitalization textcapitalization none, 77 autocorrect false, 78 decoration inputdecoration( 79 border outlineinputborder( 80 borderside borderside(color colors black)), 81 labeltext 'username'), 82 ), 83 sizedbox( 84 height 8, 85 ), 86 textfield( 87 controller controlleremail, 88 keyboardtype textinputtype emailaddress, 89 textcapitalization textcapitalization none, 90 autocorrect false, 91 decoration inputdecoration( 92 border outlineinputborder( 93 borderside borderside(color colors black)), 94 labeltext 'e mail'), 95 ), 96 sizedbox( 97 height 8, 98 ), 99 textfield( 100 controller controllerpassword, 101 obscuretext true, 102 keyboardtype textinputtype text, 103 textcapitalization textcapitalization none, 104 autocorrect false, 105 decoration inputdecoration( 106 border outlineinputborder( 107 borderside borderside(color colors black)), 108 labeltext 'password'), 109 ), 110 sizedbox( 111 height 8, 112 ), 113 container( 114 height 50, 115 child textbutton( 116 child const text('sign up'), 117 onpressed () => douserregistration(), 118 ), 119 ) 120 ], 121 ), 122 ), 123 )); 124 } 125 126 void showsuccess() { 127 showdialog( 128 context context, 129 builder (buildcontext context) { 130 return alertdialog( 131 title const text("success!"), 132 content const text("user was successfully created!"), 133 actions \<widget>\[ 134 new flatbutton( 135 child const text("ok"), 136 onpressed () { 137 navigator of(context) pop(); 138 }, 139 ), 140 ], 141 ); 142 }, 143 ); 144 } 145 146 void showerror(string errormessage) { 147 showdialog( 148 context context, 149 builder (buildcontext context) { 150 return alertdialog( 151 title const text("error!"), 152 content text(errormessage), 153 actions \<widget>\[ 154 new flatbutton( 155 child const text("ok"), 156 onpressed () { 157 navigator of(context) pop(); 158 }, 159 ), 160 ], 161 ); 162 }, 163 ); 164 } 165 166 void douserregistration() async { 167 //sigup code here 168 } 169 } 170 関数の 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 ユーザーサインのコード ユーザーサインアップ機能は、parseアプリに新しいユーザーを作成します。その前に、ユーザー名とメールアドレスがユニークであることを確認します。サインアップが成功しない場合は、返されるエラーオブジェクトを確認する必要があります。最も可能性の高い原因は、別のユーザーがすでにそのユーザー名またはメールアドレスを使用していることです。これをユーザーに伝え、別のユーザー名を試すようにお願いしてください。 ファイル内の関数 douserregistration douserregistration を検索します。 main dart main dart 内のコードを douserregistration douserregistration で置き換えます 1 final username = controllerusername text trim(); 2 final email = controlleremail text trim(); 3 final password = controllerpassword text trim(); 4 5 final user = parseuser createuser(username, password, email); 6 7 var response = await user signup(); 8 9 if (response success) { 10 showsuccess(); 11 } else { 12 showerror(response error! message); 13 } この機能を構築するには、次の手順に従ってください 新しいインスタンスを作成します parseuser parseuser クラスを使って、コマンド parseuser createuser(username, password, email) parseuser createuser(username, password, email) , アプリに入力されたデータを使用します。 次に、 signup signup 関数を呼び出します。これにより、ユーザーがparse dashboardのデータベースに登録されます。 ユーザーが正常にサインアップしたか確認します。成功しなかった場合は、エラーメッセージを表示します。 完全なコードは次のようになります 1 void douserregistration() async { 2 final username = controllerusername text trim(); 3 final email = controlleremail text trim(); 4 final password = controllerpassword text trim(); 5 6 final user = parseuser createuser(username, password, email); 7 8 var response = await user signup(); 9 10 if (response success) { 11 showsuccess(); 12 } else { 13 showerror(response error! message); 14 } 15 } テストするには、 実行 実行 ボタンをandroid studio/vscodeでクリックします。 希望するユーザー認証情報を提供した後、すべてが成功した場合、サインアップを押すとこのメッセージが表示されます 同じユーザー名でユーザーを登録しようとすると、エラーハンドリングをテストできます パスワードなしでサインアップしようとすると、別のエラーが発生します 4 ダッシュボードでユーザー登録を確認する back4appウェブサイト https //www back4app com/ アプリを見つけて、 ダッシュボード ダッシュボード > コア コア > ブラウザ ブラウザ > ユーザー ユーザー この時点で、以下のようにユーザーが表示されるはずです 完了！ このガイドの最後に、flutterで新しいparseユーザーを登録する方法を学びました。次のガイドでは、ユーザーのログインとログアウトの方法を示します。