AngularJS+Node.js+ionicでアプリ作成3こんにちは、来年の手帳を買って夢を広げているまみたすです。手帳はなんでか手書きで書きたいので毎年紙の手帳を買ってて、スケジュールの他に日記を書いたり、時期によっては食べたものの管理とかも全部手帳でするのですが、来年から海外へ行くにあたって「ここ5年分くらいの色々と私的な情報(たまにポエム的something)が書いてある手帳たちどうする問題」にぶち当たっています。実家に置いておくと見られて死ぬし(私の部屋はほぼお客さんが泊まる用となっている)、持って行っても重いし。その話は置いておいて、ionic使ってアプリ作成を続けております。亀のような歩みですが第3弾です。ログイン機能を作るSNSっぽいサービスや、会員制のサービスを作るときには必須のログイン機能を作ります。下準備1:firebaseとFacebookの準備1.Firebaseに登録Firebaseのアカウントを作成し、プロジェクトを追加し、トップ右上のメニューからコンソールへ移動。プロジェクトの始め方とか、firebaseとは?みたいなところはこの辺が参考になります。IDをコピーして以下の***の部分に入れてメモ帳にでもはっつけておいてください。Developersへアクセスし開発者用アカウントを作成します。作成したら、右上のメニューからマイアプリ→新しいアプリを追加。アプリ名等を入力します。必要な情報が揃ったので、firebaseとfacebookを連携させるための設定を入れます。firebaseの左のメニューから、DEVELOP->Authenticationをクリック。上の「ログイン方法」をクリックし、Facebookを選択。secretを確認、コピーしてfirebaseの上記画面に貼り付け保存。firebaseのコンソールトップから、「ウェブアプリにfirebaseに追加」をクリックすると、apiKeyなどの情報が出てくるので、それをコピーしてどこかに保存しておきます。それから、リダイレクトURLを設定します。「Facebookログイン」→設定をクリック。先ほどコピっておいた”https://***.firebaseapp.com/__/auth/handler”のURL(と、一応ローカルのURL)を「クライアントOAuth設定」の有効なOAuthリダイレクトURIに入力します。ログインページを作るざっと簡単なログインページを作ります。Facebook</button>中身は適当ですが、CSSを整えてあげるとUIはこうなります。背景は、imgフォルダ下に入れておき、cssの方でパス指定しました。(画像はみ出してるのは勘弁してください)2.ログイン処理用jsファイルを作成jsフォルダの下に、facebookログインを処理するためのjsを作成します。js/servicesと、js/controllersフォルダを作成。その下にそれぞれauth.jsを作成。services/auth.jsは実際にログイン処理をするためのコードをかき、controllers/auth.jsにはコントローラの役目をするコードを書きます。具体的なコードはこちらを参考に。js/app.jsにloginページについての情報を追加。fallback$urlRouterProvider.otherwise(‘/login’);});変更を保存して、http://localhost:8100/#/loginにアクセスすれば、さっきの画面が出るはず!3.index.htmlとapp.jsを変更app.jsにfirebaseの情報を記載します。項目はそれぞれ、先ほど「ウェブアプリにfirebaseを追加」をクリックしたときに出てきた情報です。“STORAGE”};firebase.initializeApp(config);index.htmlの下の方には、上でコピーしたfirebaseの情報の、一番上にあるソースを貼り、かつ先ほど作成した2つのauth.jsを読み込ませるためのコードを作成。src=”js/services/auth.js”></script>firebaseのURLは、使ってるバージョンによって変わるので必ず自分のものを使ってくださいね。先ほど作成したログインボタンに、押した時に処理が発火するようにします。ng-click=’auth.login()>これで完了!ようやくログイン機能ができました。firebaseにデータが入っているか確認。ionic関係の書籍が少なくて困ってるんですが、2018年に出るみたいですね。最新の記事まみたす1992年生まれ。知識ゼロ文系女子からSEになっているところ。カメラ、猫、お酒、旅行がすきです。2019年5月18日この記事の内容が役に立ったと思ったら、SNSで記事を共有してもらえると幸いです。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。MeCatstagram。