ionic2とFirebaseを使ったTwitterログインの実装をしていきます。
目次
※今回の開発には事前に以下のアカウントが必要になります。
まず初めにIonicプロジェクトを作成します。
$ ionic start SocialLogin –v2
今回はテンプレート指定なしなので、デフォルトでtabテンプレートが選ばれます。
プロジェクトの作成が終わったらIonicでFirebase使いやすくするangularfire2と言うプラグインを入れます。
$ npm install firebase angularfire2 –save
ここまで終わったら一旦Ionic側の作業は終了です。
次はFirebaseプロジェクトを作成していきます。
Firebaseコンソールを開きます。
プロジェクトの追加をクリックするとプロジェクト作成のダイアログが表示されます。
プロジェクト名 と国・地域の選択をしたらプロジェクト作成を押してプロジェクトを作成します。
プロジェクトの作成が終わるとダッシュボードに自動で画面遷移します。
続いて「ウェブアプリにFIrebaseを追加」を選択すると設定情報が記載されたダイアログが表示されます。
ダイアログのコピーボタンをクリックし、設定情報をコピーします。
続いて再び、Ionicプロジェクトに戻りテキストEditorで「SocialLogin > src > app 」のapp.module.tsファイルを開きます。
app.module.tsファイルにFirebaseの設定を追記します。
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
// =========== AngularFire設定追加 =========== //
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
export const firebaseConfig = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>"
};
// ====================================== //
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
// =========== AngularFireModul追加 =========== //
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule,
AngularFireAuthModule
// ====================================== //
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
続いてTwitterログインに必要なアプリをTwitter Developersサイトへ行き作成する手順になります。
Twitter Developersサイトの「My apps」をクリックします。
「Create New App」を選択しアプリ作成画面を開きます。
アプリ作成画面を開くとアプリ作成に必要な情報の入力を行います。
Name ：作成するアプリの名前を入力します。
Description：作成するアプリの説明を入力します。
Website： ウェブサイトのURLを入力します、なければ「http://example.com」などの適当なURLを入力します。
Callback URL：Callback URLの入力欄はFirebaseのTwitterログインプロバイダのコールバックURLを入力します。
Twitterアプリの作成が無事に終わると「Keys and Access Tokens」タブが選択できるようになりAPI KeyとAPI Secretが取得できるようになります。
API KeyとAPI Secretの値をFirebaseのTwitterログインプロバイダの「APIキー」と「APIシークレット」にそれぞれ設定します。
最後はIonicプロジェクトにログイン処理を書いていきます。
今回は先ほど作ったIonicプロジェクトのデフォルトで作成されているhome.tsにログインの処理を書いていきます。
home.tsまでのパスは「SocialLogin > src > pages > home 」です。
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
user: Observable<firebase.User>;
constructor(
public navCtrl: NavController,
public afAuth: AngularFireAuth
) {
this.user = afAuth.authState;
}
// ログイン処理
login() {
this.afAuth.auth.signInWithPopup(new firebase.auth.TwitterAuthProvider());
}
// ログアウト処理
logout() {
this.afAuth.auth.signOut();
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>Twitterログイン</ion-title>
<ion-buttons end>
<button ion-button icon-only color="danger" *ngIf="(user | async)?.uid" (click)="logout()">
<ion-icon name="log-out"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2 style="margin: 100px 0 20px;">Twitterログイン</h2>
<button ion-button block (click)="login()">
<ion-icon name="logo-twitter" style="font-weight: bold; margin-right: 10px;"></ion-icon>Twitterログイン
</button>
<br>
<br>
<ion-list>
<ion-list-header>
ユーザー情報
</ion-list-header>
<ion-item>ID:{{ (user | async)?.uid }}</ion-item>
<ion-item>名前:{{ (user | async)?.displayName }}</ion-item>
</ion-list>
</ion-content>
ここで、Ionicを起動してみます。
ターミナルを起動し、以下のコマンドを実行します。
$ ionic serve
無事に起動するとターミナルの最後の行に起動したサーバーのホスト名とポート番号が表示されます。
dev server running: http://localhost:8100/
ブラウザを開いてhttp://localhost:8100/にアクセスしてみましょう。
このような画面ができたと思います。
それでは実際にログインを試してみましょう。
ポップアップウィンドが立ち上がったのち、ログイン画面に戻ってID・名前と画面右上にログアウトボタンが表示されていれば成功です。
Firebaseのコンソールに移動し、Authenticationを選択すると先ほどログインしたユーザーが追加されていると思います。
以上、IonicとFirebaseを使ったTwitterログインの実装でした。
いかがでしたでしょうか、ソーシャルログインの実装がとても簡単にできたと思います。
他にもFacebookやGoogleアカウントでのログインプロバイダも用意されていますので、ぜひ試してみて下さい。
参考サイト
angularfire2 User authentication
