iOS
Back4AppでiOSアプリにユーザー登録とログインを実装する方法
15 分
xcodeとback4appを使用したログインとユーザー登録チュートリアル イントロダクション このセクションでは、back4appを使用して、シンプルなユーザー登録を持つアプリを作成する方法を説明します。 parse serverのコア機能 を通じて。 これがどのように見えるかです いつでも、このチュートリアルで構築された完全なプロジェクトにアクセスできます。私たちの githubリポジトリ にて。 このクイックスタートを完了するには、次のものが必要です: xcode back4appで作成されたアプリ。 「 新しいparseアプリのチュートリアル 」に従って、back4appでparseアプリを作成する方法を学びます。 back4appに接続されたiosアプリ。 注意: 「 parse sdk (objc)のインストールチュートリアル 」に従って、back4appに接続されたxcodeプロジェクトを作成します。 有料のapple developerアカウント。 1 セットアップ loggedinviewcontrollerという別のビューコントローラーを追加します。メインストーリーボードで、キャンバスにビューコントローラーをドラッグし、クラスをloggedinviewcontrollerに設定し、storyboard idをloggedinviewcontrollerに設定します。 viewcontroller mとloggedinviewcontroller mの両方で、ファイルの先頭にparseモジュールを含めることを確認します。 \#import \<parse/parse h> 2 サインアップとログインのuiを作成する ログインすると、セッションオブジェクトが作成され、ログインしたユーザーを指します。ログインが成功すると、 parseuser currentuser() はユーザーオブジェクトを返し、セッションオブジェクトが ダッシュボード ダッシュボード に作成されます。そうでない場合、ターゲットユーザー名が存在しないか、パスワードが間違っていると、nullが返されます。 ログインアクションを実行するために使用されるメソッドは parseuser loginwithusername() です。このメソッドは、ユーザー名とパスワードの文字列と同じ数の引数を必要とし、コールバック関数を呼び出すことがあります。 注意 サインアップ後、ログインは自動的に行われます。 4つのuitextfieldをメインストーリーボードのviewcontrollerにドラッグします。テキストフィールドを中央に配置し、2つを上部に、2つを下部に配置します。さらに2つのuibuttonをビューにドラッグし、テキストフィールドの下に配置します。上のボタンのテキストを「サインイン」と設定し、下のボタンのテキストを「サインアップ」と設定します。テキストフィールドには「ユーザー名」と「パスワード」と表示させます。以下のようになります。 次に、ストーリーボードのuitextfieldをviewcontrollerのプロパティに接続します。viewcontroller mの先頭に以下のプロパティを追加します。次に、ストーリーボードに移動し、各uitextfieldを右クリックしてリファレンスアウトレットをクリックし、viewcontrollerアイコンに線をドラッグして適切なフィールドに設定します。signinusernamefieldはサインインユーザー名フィールドに接続されます。最後に、後で使用するためにuiactivityindicatorviewを追加します。 @interface viewcontroller (){ iboutlet uitextfield signinusernametextfield; iboutlet uitextfield signinpasswordtextfield; iboutlet uitextfield signupusernametextfield; iboutlet uitextfield signuppasswordtextfield; uiactivityindicatorview activityindicatorview; } 次に、viewdidloadメソッドでuiactivityindicatorviewを画面の中央に配置します。 \ (void)viewdidload { \[super viewdidload]; cgrect frame = cgrectmake (120 0, 185 0, 80, 80); activityindicatorview = \[\[uiactivityindicatorview alloc] initwithframe\ frame]; activityindicatorview\ color = \[uicolor bluecolor]; \[self view addsubview\ activityindicatorview]; } 次に、viewdidappearメソッドで既にログインしているかどうかを確認します。ログインしている場合は、ユーザーをloggedinviewcontrollerにリダイレクトします。 \ (void)gotomainpage { nsstring storyboardname = @"main"; uistoryboard storyboard = \[uistoryboard storyboardwithname\ storyboardname bundle nil]; loggedinviewcontroller vc = \[storyboard instantiateviewcontrollerwithidentifier @"loggedinviewcontroller"]; \[self presentviewcontroller\ vc animated\ yes completion\ nil]; } 5\ では、メインストーリーボードのviewcontrollerにあるsignupボタンに接続するibactionを設定しましょう。 \ (ibaction)signup (id)sender { pfuser user = \[pfuser user]; user username = signupusernametextfield text; user password = signuppasswordtextfield text; \[activityindicatorview startanimating]; \[user signupinbackgroundwithblock ^(bool succeeded, nserror error) { \[self >activityindicatorview stopanimating]; if (!error) { \[self gotomainpage]; } else { \[self displaymessagetouser\ error localizeddescription]; } }]; } 6\ サーバーからのエラーメッセージを表示するためにdisplayerrormessage関数を追加する必要があります。このメソッドは、私たちのparseアプリと通信するたびに使用します。 \ (void)displaymessagetouser (nsstring )message { uialertcontroller alert = \[uialertcontroller alertcontrollerwithtitle @"message" message\ message preferredstyle\ uialertcontrollerstylealert]; uipopoverpresentationcontroller poppresenter = \[alert popoverpresentationcontroller]; poppresenter sourceview = self view; uialertaction okbutton = \[uialertaction actionwithtitle @"ok" style\ uialertactionstyledefault handler ^(uialertaction action) { }]; \[alert addaction\ okbutton]; poppresenter sourcerect = self view\ frame; alert modalpresentationstyle = uimodalpresentationpopover; \[self presentviewcontroller\ alert animated\ yes completion\ nil]; } 7\ ネットワークアクティビティとネットワークエラーを処理できるようになったので、メインストーリーボードのviewcontrollerにあるsigninボタンに接続するibactionを設定しましょう。 \ (ibaction)signup (id)sender { pfuser user = \[pfuser user]; user username = signupusernametextfield text; user password = signuppasswordtextfield text; \[activityindicatorview startanimating]; \[user signupinbackgroundwithblock ^(bool succeeded, nserror error) { \[self >activityindicatorview stopanimating]; if (!error) { \[self gotomainpage]; } else { \[self displaymessagetouser\ error localizeddescription]; } }]; } 3 ログアウト ログアウトすると、ログインしているユーザーのアクティブなセッションオブジェクトが削除されます。ログアウトを実行するために使用されるメソッドは parseuser logoutinbackgroundwithblock() です。 メインストーリーボードのloggedinviewcontrollerにuibuttonをドラッグします。ボタンのタイトルを「logout」に設定します。次のようになります。 サーバーからのエラーメッセージを表示するために、displayerrormessage関数を再度追加しましょう。このメソッドは、パースアプリと通信するたびに使用します。 \ (void)displaymessagetouser (nsstring )message { uialertcontroller alert = \[uialertcontroller alertcontrollerwithtitle @"メッセージ" message\ message preferredstyle\ uialertcontrollerstylealert]; uipopoverpresentationcontroller poppresenter = \[alert popoverpresentationcontroller]; poppresenter sourceview = self view; uialertaction okbutton = \[uialertaction actionwithtitle @"ok" style\ uialertactionstyledefault handler ^(uialertaction action) { }]; \[alert addaction\ okbutton]; poppresenter sourcerect = self view\ frame; alert modalpresentationstyle = uimodalpresentationpopover; \[self presentviewcontroller\ alert animated\ yes completion\ nil]; } 2\ ログアウト後にログイン/サインアップ画面に戻るためのgotostartpage関数を追加しましょう。 \ (void)gotostartpage { nsstring storyboardname = @"main"; uistoryboard storyboard = \[uistoryboard storyboardwithname\ storyboardname bundle nil]; viewcontroller vc = \[storyboard instantiateviewcontrollerwithidentifier @"viewcontroller"]; \[self presentviewcontroller\ vc animated\ yes completion\ nil]; } 3\ 最後に、ログアウト呼び出しを実行し、viewcontroller mのサインアップ/ログインページに戻るためのibactionを追加しましょう。このメソッドはpfuserをログアウトし、サインアップページに戻ります。このibactionをloggedinviewcontrollerのログアウトボタンに接続してください。 \ (ibaction)logout (id)sender { \[activityindicatorview startanimating]; \[pfuser logoutinbackgroundwithblock ^(nserror nullable error) { \[self >activityindicatorview stopanimating]; if(error == nil){ \[self gotostartpage]; }else{ \[self displaymessagetouser\ error debugdescription]; } }]; } 4 アプリをテストする アプリを実行し、いくつかのユーザーを作成し、登録後に再度ログインしてみてください。 こちらでログインしてください back4app ウェブサイト https //www back4app com/ アプリを見つけて、 ダッシュボード ダッシュボード > コア コア > ブラウザ ブラウザ > ユーザー ユーザー 同じユーザーでログインとログアウトを試み、再度サインインしてください。 この時点で、以下のようにユーザーが表示されるはずです 注意 上記に表示されたコードを使用すると、ユーザーでログインするたびに、 セッション セッション があなたの ダッシュボード ダッシュボード で開かれますが、ユーザーがログアウトすると、その特定の セッション セッション は終了します。また、ログインまたはサインアップの試行が失敗した場合、parse serverで開かれた セッション セッション は ダッシュボード ダッシュボード から削除されます。 完了しました! この段階で、back4appを通じてparse serverのコア機能を使用して、アプリにログイン、登録、またはログアウトできます!