AngularJS+Node.js+ionicでアプリ作成3

こんにちは、来年の手帳を買って夢を広げているまみたすです。

手帳はなんでか手書きで書きたいので毎年紙の手帳を買ってて、スケジュールの他に日記を書いたり、時期によっては食べたものの管理とかも全部手帳でするのですが、来年から海外へ行くにあたって「ここ5年分くらいの色々と私的な情報(たまにポエム的something)が書いてある手帳たちどうする問題」にぶち当たっています。
実家に置いておくと見られて死ぬし(私の部屋はほぼお客さんが泊まる用となっている)、持って行っても重いし。金庫でも買おうか。

その話は置いておいて、ionic使ってアプリ作成を続けております。亀のような歩みですが第3弾です。

ログイン機能を作る

SNSっぽいサービスや、会員制のサービスを作るときには必須のログイン機能を作ります。

下準備1:firebaseとFacebookの準備

1.Firebaseに登録
Firebaseのアカウントを作成し、プロジェクトを追加し、トップ右上のメニューからコンソールへ移動。
プロジェクトの始め方とか、firebaseとは?みたいなところはこの辺が参考になります。

Project Overviewの横の設定マークより、プロジェクト IDをコピーして以下の***の部分に入れてメモ帳にでもはっつけておいてください。

https://***.firebaseapp.com/__/auth/handler

2.Facebook
今回はFacebookログインを作りたいので、Facebook Developersへアクセスし開発者用アカウントを作成します。

作成したら、右上のメニューからマイアプリ→新しいアプリを追加。
アプリ名等を入力します。
必要な情報が揃ったので、firebaseとfacebookを連携させるための設定を入れます。

firebaseの左のメニューから、DEVELOP->Authenticationをクリック。
上の「ログイン方法」をクリックし、Facebookを選択。

さっき登録したFacebookの開発者コンソールメニューの設定のところからアプリIDとapp secretを確認、コピーしてfirebaseの上記画面に貼り付け保存。

firebaseのコンソールトップから、「ウェブアプリにfirebaseに追加」をクリックすると、apiKeyなどの情報が出てくるので、それをコピーしてどこかに保存しておきます。

それから、リダイレクトURLを設定します。
Facebook開発者コンソールの左メニューから、 「Facebookログイン」→設定をクリック。先ほどコピっておいた”https://***.firebaseapp.com/__/auth/handler”のURL(と、一応ローカルのURL)を「クライアントOAuth設定」の有効なOAuthリダイレクトURIに入力します。

ログインページを作る

ざっと簡単なログインページを作ります。
1,templatesフォルダの下にlogin.htmlを作成

<div class=”facebook”><button class=”button button-positive facebook-button”>
<i class=”ion-social-facebook big”></i> Login with 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ページについての情報を追加。

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state(‘app’, {
url: ‘/app’,
abstract: true,
templateUrl: ‘templates/menu.html’
}).state(‘login’, {
url: ‘/login’,
templateUrl: ‘templates/login.html’,
controller: ‘AuthCtrl as auth’
})

(中略)

.state(‘app.settings’, {
url: ‘/settings’,
views: {
‘menuContent’: {
templateUrl: ‘templates/settings.html’
}
}
});

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise(‘/login’);
});

 

変更を保存して、http://localhost:8100/#/loginにアクセスすれば、さっきの画面が出るはず!

3.index.htmlとapp.jsを変更

app.jsにfirebaseの情報を記載します。
項目はそれぞれ、先ほど「ウェブアプリにfirebaseを追加」をクリックしたときに出てきた情報です。

var config = {
apiKey: “API KEY”,
authDomain: “DOMAIN”,
databaseURL: “DATABASE”,
storageBucket: “STORAGE”
};
firebase.initializeApp(config);

index.htmlの下の方には、上でコピーしたfirebaseの情報の、一番上にあるソースを貼り、かつ先ほど作成した2つのauth.jsを読み込ませるためのコードを作成。

<script src=”https://www.gstatic.com/firebasejs/4.8.0/firebase.js”></script>
<script src=”js/controllers/auth.js”></script>
<script src=”js/services/auth.js”></script>

firebaseのURLは、使ってるバージョンによって変わるので必ず自分のものを使ってくださいね。

ログインボタン実装

最後です。
先ほど作成したログインボタンに、押した時に処理が発火するようにします。

<button class=”button button-positive facebook-button” ng-click=’auth.login()>

これで完了!ようやくログイン機能ができました。
firebaseにデータが入っているか確認。

ionic関係の書籍が少なくて困ってるんですが、2018年に出るみたいですね。

 

Angularも仕事で触る機会はないけど使いこなせるようになりたい!

The following two tabs change content below.
まみたす

まみたす

1992年生まれ。知識ゼロ文系女子からSEになっているところ。 カメラ、猫、お酒、旅行がすきです。
この記事の内容が役に立ったと思ったら、SNSで記事を共有してもらえると幸いです。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)