質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

SNS

SNS(ソーシャル・ネットワーキング・サービス)は、 人と人とのつながりを促進したり、サポートしたりすることが可能なコミュニティ型のWebサービスです。

Q&A

0回答

1037閲覧

【Ionic/Angular】FirebaseUIでSNS認証(フロント部分)を実装したい

truss_yuta

総合スコア5

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

SNS

SNS(ソーシャル・ネットワーキング・サービス)は、 人と人とのつながりを促進したり、サポートしたりすることが可能なコミュニティ型のWebサービスです。

0グッド

0クリップ

投稿2020/06/22 01:38

編集2020/06/22 01:44

前提・実現したいこと

FirebaseUI-Angularを使って、IonicアプリにFirebaseのSNS認証(フロント部分)を実装したい
https://github.com/RaphaelJenni/firebaseui-angular

発生している問題・エラーメッセージ

firebase-uiタグ内に生成されるはずの要素が現れない。

index

1<firebase-ui _ngcontent-cvm-c3=""> 2 <div id="firebaseui-auth-container"></div> 3</firebase-ui>

該当のソースコード

実行コード

$ npm install firebaseui-angular --save $ npm install firebase firebaseui @angular/fire firebaseui-angular --save

ソースコード

module

1import { NgModule } from '@angular/core'; 2import { BrowserModule } from '@angular/platform-browser'; 3import { RouteReuseStrategy } from '@angular/router'; 4import { AngularFireModule } from '@angular/fire'; 5import { AngularFireAuthGuard } from '@angular/fire/auth-guard'; 6import { AngularFireAuthModule } from '@angular/fire/auth'; 7import { AngularFirestoreModule } from '@angular/fire/firestore'; 8import { environment } from '../environments/environment'; 9import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; 10import { SplashScreen } from '@ionic-native/splash-screen/ngx'; 11import { StatusBar } from '@ionic-native/status-bar/ngx'; 12import { AppRoutingModule } from './app-routing.module'; 13import { AppComponent } from './app.component'; 14import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 15import { ServiceWorkerModule } from '@angular/service-worker'; 16import { FirebaseUIModule, firebase, firebaseui } from 'firebaseui-angular'; 17 18const firebaseUiAuthConfig: firebaseui.auth.Config = { 19 autoUpgradeAnonymousUsers: false, 20 signInFlow: 'popup', 21 signInOptions: [ 22 firebase.auth.GoogleAuthProvider.PROVIDER_ID, 23 { 24 scopes: [ 25 'public_profile', 26 'email', 27 'user_likes', 28 'user_friends' 29 ], 30 customParameters: { 31 auth_type: 'reauthenticate' 32 }, 33 provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID 34 }, 35 firebase.auth.TwitterAuthProvider.PROVIDER_ID, 36 firebase.auth.GithubAuthProvider.PROVIDER_ID, 37 { 38 requireDisplayName: false, 39 provider: firebase.auth.EmailAuthProvider.PROVIDER_ID 40 }, 41 firebase.auth.PhoneAuthProvider.PROVIDER_ID, 42 firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID 43 ], 44 tosUrl: '/localhost:8100', 45 privacyPolicyUrl: '/localhost:8100', 46 signInSuccessUrl: 'https://google.com', 47 credentialHelper: firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM, 48}; 49 50@NgModule({ 51 declarations: [AppComponent], 52 entryComponents: [], 53 imports: [ 54 BrowserModule, 55 IonicModule.forRoot(), 56 AppRoutingModule, 57 BrowserAnimationsModule, 58 AngularFireModule.initializeApp(environment.firebase), 59 AngularFireAuthModule, 60 AngularFirestoreModule, 61 FirebaseUIModule.forRoot(firebaseUiAuthConfig), 62 ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }) 63 ], 64 providers: [ 65 StatusBar, 66 SplashScreen, 67 AngularFireAuthGuard, 68 { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } 69 ], 70 bootstrap: [AppComponent] 71}) 72export class AppModule {}

template

1<ion-content> 2 <firebase-ui></firebase-ui> 3</ion-content>

scss

1@import '~firebaseui/dist/firebaseui.css';

試したこと

・FirebaseSDKの設定をやり直す
・googleプロバイダを有効にする
・変数firebaseUiAuthConfigのプロバイダ設定数を減らす

環境

・Ionic5
・Angular8
・Firebaseui4.5
・Mac Catalina

怪しい

・変数firebaseUiAuthConfigの設定or場所が間違っている?
・Firebaseの設定を間違えている?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問