Di elemen <body> halaman Anda, sisipkan widget UI:
<body>
<!-- The surrounding HTML is left untouched. Your app can use that space for branding, controls and other customizations.-->
<h1>Welcometo[APP_NAME]</h1>
<divid="firebaseui-auth-container"></div>
</body>
Saat Anda merender halaman, UI yang disediakan oleh Identity Platform akan muncul, sehingga pengguna dapat login ke aplikasi Anda.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Sulit dipahami","hardToUnderstand","thumb-down"],["Informasi atau kode contoh salah","incorrectInformationOrSampleCode","thumb-down"],["Informasi/contoh yang saya butuhkan tidak ada","missingTheInformationSamplesINeed","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-09-04 UTC."],[[["\u003cp\u003eThis guide demonstrates how to integrate Identity Platform's pre-built user interface (UI) into an existing web application.\u003c/p\u003e\n"],["\u003cp\u003eIntegrating the UI requires adding the UI script and CSS from the CDN to the \u003ccode\u003e<head>\u003c/code\u003e tag of your page.\u003c/p\u003e\n"],["\u003cp\u003eYou must enable at least one sign-in method in the Google Cloud console for users to be able to sign in, then you need to configure it in the \u003ccode\u003e<head>\u003c/code\u003e tag of your page.\u003c/p\u003e\n"],["\u003cp\u003eTo display the Identity Platform UI, insert the UI widget into the \u003ccode\u003e<body>\u003c/code\u003e of your webpage, which will then allow users to sign in to your app.\u003c/p\u003e\n"],["\u003cp\u003eThe latest SDK version can be found on the \u003ca href=\"https://github.com/firebase/firebaseui-web#installation\"\u003efirebaseui-web GitHub repository\u003c/a\u003e, and the \u003ca href=\"https://github.com/firebase/firebaseui-web\"\u003eUI component documentation on GitHub\u003c/a\u003e provides information on customizations.\u003c/p\u003e\n"]]],[],null,["# Integrating Identity Platform UI elements into your web app\n===========================================================\n\nThis guide shows you how to integrate a user interface (UI) provided by\nIdentity Platform into an existing web app.\n\nBefore you begin\n----------------\n\nTo complete this guide, you'll need the following:\n\n- A Google Cloud project for which you're a Project Owner, with [billing enabled](/billing/docs/how-to/modify-project#enable_billing_for_a_project).\n\n### Open-source UI components for other clients\n\nThis article shows you how to integrate UI components into a web app. For\nother app types, see the following pages:\n\n- [iOS](https://github.com/firebase/firebaseui-ios)\n- [Android](https://github.com/firebase/firebaseui-android)\n\nIntegrating the UI components into your app\n-------------------------------------------\n\n1. Add the UI script and CSS from the CDN in the `\u003chead\u003e` tag of your page.\n\n \u003cbr /\u003e\n\n \u003cscript src=\"https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js\"\u003e\u003c/script\u003e\n \u003clink rel=\"stylesheet\" href=\"https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css\" /\u003e\n\n | **Note:** You should always use the most up-to-date UI components to get the benefits of new functionality that is added to the pre-integrated UI. For the latest SDK version, see the [firebaseui-web GitHub repository](https://github.com/firebase/firebaseui-web#installation).\n2. Enable at least one one sign-in method using the Google Cloud console.\n See the [Quickstart](/identity-platform/docs/quickstart-cicp) to learn how.\n\n3. In the `\u003chead\u003e` tag of your page, configure how your users can sign in:\n\n \u003cscript\u003e\n // UI Configuration\n var uiConfig = {\n signInSuccessUrl: '[URL_TO_REDIRECT_ON_SIGNIN_SUCCESS]',\n signInOptions: [\n // Leave the lines as is for the providers you want to offer your users.\n firebase.auth.GoogleAuthProvider.PROVIDER_ID,\n firebase.auth.FacebookAuthProvider.PROVIDER_ID,\n firebase.auth.TwitterAuthProvider.PROVIDER_ID,\n firebase.auth.GitHubAuthProvider.PROVIDER_ID,\n firebase.auth.EmailAuthProvider.PROVIDER_ID,\n firebase.auth.PhoneAuthProvider.PROVIDER_ID,\n firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID\n ],\n // tosUrl and privacyPolicyUrl accept either url string or a callback\n // function.\n // Terms of service url/callback.\n tosUrl: '[YOUR_TOS_URL]',\n // Privacy policy url/callback.\n privacyPolicyUrl: function() {\n window.location.assign('[YOUR_PRIVACY_POLICY_URL]');\n }\n };\n\n // Initialize the UI Components.\n var ui = new firebaseui.auth.AuthUI(firebase.auth());\n // The start method will wait until the DOM is loaded.\n ui.start('#firebaseui-auth-container', uiConfig);\n \u003c/script\u003e\n\n4. In the `\u003cbody\u003e` element of your page, insert the UI widget:\n\n \u003cbody\u003e\n \u003c!-- The surrounding HTML is left untouched. Your app can use that space for branding, controls and other customizations.--\u003e\n \u003ch1\u003eWelcome to [APP_NAME]\u003c/h1\u003e\n \u003cdiv id=\"firebaseui-auth-container\"\u003e\u003c/div\u003e\n \u003c/body\u003e\n\n When you render your page, the UI provided by Identity Platform will\n appear, allowing users to sign in to your app.\n\nTo learn about more customizations, see the\n[UI component documentation on GitHub](https://github.com/firebase/firebaseui-web).\n\nWhat's next\n-----------\n\n- Learn how to [Configure custom claims on users](/identity-platform/docs/how-to-configure-custom-claims).\n- Read about the [Admin Auth API](/identity-platform/docs/concepts-admin-auth-api).\n- Learn how to [Authenticate users on App Engine using Identity Platform](/identity-platform/docs/how-to-auth-users-app-engine)."]]
