Skip to main content

Documentation Index

Fetch the complete documentation index at: https://auth0-feat-ionic-capacitor-quickstart-modernization.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

Lock.Android UIの外観はカスタマイズすることができます。ヘッダーロゴやタイトルなどの様々な項目に加え、一部の色やボタンなどの項目も、アプリケーションのテーマに合わせて変更できます。

​
サポートされる属性のリスト

名前タイプ説明
Auth0.HeaderLogodrawable - referenceヘッダー内に表示する描画可能なロゴ。推奨される最小解像度は200ピクセル（幅） x 200ピクセル（高さ）です。
Auth0.HeaderTitlestring - referenceヘッダー内にタイトルとして表示するテキスト。
Auth0.HeaderTitleColorcolor - referenceタイトルテキストの色。
Auth0.HeaderBackgroundcolor - referenceヘッダーのバックグラウンドカラーとして使用される。
Auth0.PrimaryColorcolor - referenceSubmit（送信）ボタンといったウィジェットの_normal_ stateとして使用される。accent colorとしても使用される。
Auth0.DarkPrimaryColorcolor - referenceSubmit（送信）ボタンといったウィジェットの_pressed_ stateとして使用される。

​
新しいリソースファイルを作成する

まず、Lock.Themeから拡張する新しいThemeを作成し、カスタマイズする属性をオーバーライドします。オーバーライドしない属性は、Lock.Themeで定義された属性がデフォルトになります。 
<resources>
  <style name="MyTheme" parent="Lock.Theme">
    <item name="Auth0.HeaderLogo">@drawable/com_auth0_lock_header_logo</item>
    <item name="Auth0.HeaderTitle">@string/com_auth0_lock_header_title</item>
    <item name="Auth0.HeaderTitleColor">@color/com_auth0_lock_text</item>
    <item name="Auth0.HeaderBackground">@color/com_auth0_lock_header_background</item>
    <item name="Auth0.PrimaryColor">@color/com_auth0_lock_submit_normal</item>
    <item name="Auth0.DarkPrimaryColor">@color/com_auth0_lock_submit_pressed</item>
  </style>
</resources>
新しいテーマを使用するには、android:theme属性を使用してAndroidManifest.xmlファイルでアクティビティをセットアップします。使用するのがクラシックLockかパスワードレスLockかに応じて、更新するアクティビティ宣言が異なります。Lockライブラリーはこれらのアクティビティを内部で宣言するため、テーマ属性のみのライブラリーの宣言をオーバーライドする特別なtools:replace属性を使用して、アクティビティを再度宣言する必要があります。 
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.company.app">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <!-- Classic -->
        <activity
            android:name="com.auth0.android.lock.LockActivity"
            android:theme="@style/MyTheme"
            tools:replace="android:theme" />
        <!-- Passwordless -->
        <activity
            android:name="com.auth0.android.lock.PasswordlessLockActivity"
            android:theme="@style/MyTheme"
            tools:replace="android:theme" />
    </application>
</manifest>
スタイルリソースファイルに独自のテーマを定義し、テーマの親がLock.Themeであることを指定し忘れた場合、またはマニフェストファイルでアクティビティのテーマを指定しなかった場合は、UIが非常に見づらくなるので注意してください。カスタムテーマで無効な値を指定した場合も、同様のことが起こります。

​
OAuth接続のカスタムボタン

サードパーティのIDプロバイダー接続のスタイルをカスタマイズするには、新しい接続を作成しなければなりません。これにはCustom Social Connections拡張機能を使用して、すべての必須フィールドに入力した上で変更を保存します。 LockでサードパーティのIDプロバイダー接続のスタイルをカスタマイズするには、ビルダーを呼び出し、使用するconnectionNameとstyleを両方渡します。 まず、Lock.Theme.AuthStyleを拡張するカスタムスタイルを作成します。以下の例のようなキーの名前を使用して、ロゴ、背景色、接続名を定義します。 
<style name="Style.Facebook" parent="Lock.Theme.AuthStyle">
    <item name="Auth0.BackgroundColor">@color/facebook_color</item>
    <item name="Auth0.Name">@string/facebook_name</item>
    <item name="Auth0.Logo">@drawable/facebook_logo</item>
</style>
ビルダーのセットアップ画面で、オーバーライドする接続名のAuthStyleを追加します。 builder.withAuthStyle("facebook", R.style.Style_Facebook) .build(...); Lock がその接続をSocialButton に表示する必要がある場合、まずユーザーがオーバーライドしたスタイルが検索されます。見つからない場合は、Lockのデフォルトのスタイルになります。上のfacebookの例では、Facebookの背景色、Facebookのロゴ、および「FACEBOOK」の名前が使用されることになります。