Firebase 認証メール リンクのカスタマイズ

認証メールのカスタマイズ

Firebase Authentication を統合してメールとパスワードを介してユーザー アクセスを管理することは、ウェブ アプリケーションにとって強力な選択肢です。サインインとセキュリティを処理する簡単な方法を提供しますが、ユーザー エクスペリエンスに合わせて調整する必要がある場合があります。一般的な調整の 1 つは、電子メールの検証やパスワードのリセットなどのアクションに使用されるデフォルトの電子メール テンプレートを変更することです。

デフォルトの電子メールでは、ユーザーに従うよう要求される URL が送信されますが、場合によっては、過度に複雑または安全でないように見える場合があります。これらのリンクを「ここをクリック」ハイパーリンクなどのより単純なものに変更するか、不要な URL パラメーターを非表示にすることで、ユーザーのセキュリティに対する認識と電子メール全体の美しさを大幅に向上させることができます。

指示	説明
admin.initializeApp()	Firebase Admin SDK をデフォルトの認証情報で初期化し、Firebase 機能から直接メールを送信するなどのサーバー側の機能を有効にします。
nodemailer.createTransport()	ここでは特に Gmail 用に構成された、電子メール送信用の SMTP トランスポートを使用して再利用可能なトランスポータ オブジェクトを作成します。
functions.auth.user().onCreate()	新しいユーザーが作成されたときにアクティブ化される Firebase Cloud Function トリガー。ユーザー登録直後に確認メールを送信するためにここで使用されます。
mailTransport.sendMail()	Nodemailer で作成されたトランスポーター オブジェクトを使用して、差出人、宛先、件名、テキストなどの定義されたオプションを含む電子メールを送信します。
encodeURIComponent()	URL を破壊する可能性のある文字をエスケープすることで URI コンポーネントをエンコードします。ここでは、電子メール パラメーターを URL に安全に追加するために使用されます。
app.listen()	サーバーを起動し、指定されたポートで接続を待機します。これは、基本的な Node.js サーバーのセットアップに不可欠です。

スクリプト機能の説明

提供されているスクリプトを使用すると、Firebase Authentication シナリオでカスタマイズされた電子メール リンクの送信が容易になります。の このコマンドは極めて重要で、バックエンド スクリプトが Firebase サービスと安全にやり取りできるようにする Firebase Admin SDK を初期化します。この設定は、ユーザー データと認証関連の電子メールを管理するサーバー側コードの実行に不可欠です。もう一つの重要なコマンドは、 では、SMTP トランスポータを使用して電子メール送信サービスを設定します。この例では Gmail 用に特別に構成されています。このトランスポーターは、Node.js 経由で電子メールを送信するために使用され、サーバーから直接電子メール操作を処理する信頼性の高い方法を提供します。

Firebase 関数内でトリガーされる , 新しいユーザー アカウントが作成されると、電子メールが自動的に送信されます。このトリガーにより、ユーザーのアカウントが登録されるとすぐに電子メール検証プロセスが開始され、セキュリティとユーザー エクスペリエンスが向上します。の 次に、コマンドを使用して電子メールを送信します。この電子メールには、電子メールのコンテンツ内に埋め込まれたカスタマイズされたリンクが含まれます。このリンクは、ユーザー エクスペリエンスを向上させるために簡素化することも、複雑なクエリ パラメーターを隠すためにマスクすることもできるため、ユーザー インタラクションのシンプルさとセキュリティを維持できます。最後に、 この機能により、URL に追加されたデータが安全にエンコードされ、URL 形式に関連するエラーやセキュリティの問題が防止されます。

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
const nodemailer = require('nodemailer');
const gmailEmail = functions.config().gmail.email;
const gmailPassword = functions.config().gmail.password;
const mailTransport = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: gmailEmail,
    pass: gmailPassword,
  },
});
exports.sendCustomEmail = functions.auth.user().onCreate((user) => {
  const email = user.email; // The email of the user.
  const displayName = user.displayName || 'User';
  const url = `https://PROJECTNAME.firebaseapp.com/__/auth/action?mode=verifyEmail&oobCode=<oobCode>&apiKey=<APIKey>`;
  const mailOptions = {
    from: '"Your App Name" <noreply@yourdomain.com>',
    to: email,
    subject: 'Confirm your email address',
    text: \`Hello ${displayName},\n\nPlease confirm your email address by clicking on the link below.\n\n<a href="${url}">Click here</a>\n\nIf you did not request this, please ignore this email.\n\nThank you!\`
  };
  return mailTransport.sendMail(mailOptions)
    .then(() => console.log('Verification email sent to:', email))
    .catch((error) => console.error('There was an error while sending the email:', error));
});

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const PORT = process.env.PORT || 3000;
app.use(bodyParser.json());
app.get('/sendVerificationEmail', (req, res) => {
  const userEmail = req.query.email;
  const customUrl = 'https://yourcustomdomain.com/verify?email=' + encodeURIComponent(userEmail);
  // Assuming sendEmailFunction is a predefined function that sends emails
  sendEmailFunction(userEmail, customUrl)
    .then(() => res.status(200).send('Verification email sent.'))
    .catch((error) => res.status(500).send('Error sending email: ' + error.message));
});
app.listen(PORT, () => {
  console.log('Server running on port', PORT);
});

Firebase での高度なメール テンプレートのカスタマイズ

Firebase Authentication 内でメール テンプレートをカスタマイズする場合、開発者は多くの場合、単純なテキスト編集を超えて、動的コンテンツとユーザー固有のデータの統合を考慮する必要があります。これには、ユーザー データを利用して電子メール メッセージをパーソナライズすること、つまりユーザー エンゲージメントとセキュリティを強化する機能が含まれます。たとえば、ユーザー固有のトークンを電子メール テンプレート内に直接埋め込むと、電子メールの検証やパスワードのリセットなどのプロセスが自動化され、より使いやすく安全になります。

さらに、Firebase にはメール テンプレートをローカライズする機能があり、ユーザーの好みの言語でメールを送信できるようになります。このローカライゼーションは、認証プロセスのアクセシビリティと使いやすさを向上させるため、グローバル ユーザー ベースを持つアプリケーションにとって非常に重要です。開発者は、Firebase の組み込み機能またはサードパーティのライブラリを使用してテンプレートのローカリゼーションを管理し、多様な視聴者に効率的に対応できます。

1. Firebase メール テンプレート設定にアクセスするにはどうすればよいですか?
2. メール テンプレート設定にアクセスするには、Firebase コンソールに移動し、プロジェクトを選択し、[認証]、[テンプレート] の順に移動します。
3. Firebase メール テンプレートで HTML を使用できますか?
4. はい、Firebase ではメール テンプレートに HTML コンテンツを許可し、カスタム スタイルやリンクを含めることができます。
5. Firebase メールに動的データを追加することはできますか?
6. はい、次のようなプレースホルダーを使用できます そして ユーザー固有のデータを電子メールに挿入します。
7. 送信前に Firebase メール テンプレートをテストするにはどうすればよいですか?
8. Firebase には、メール テンプレートをプレビューしてテストするためのコンソールに「テスト メールを送信」オプションが用意されています。
9. Firebase メール テンプレートは複数の言語を処理できますか?
10. はい。Firebase はメール テンプレートのローカライズをサポートしているため、ユーザーの設定に基づいてさまざまな言語でメールを送信できます。

Firebase メール テンプレートを変更すると、よりカスタマイズされたユーザー エクスペリエンスが可能になり、アプリケーションとのやり取りが安全になるだけでなく、ユーザー フレンドリーになります。カスタム ハイパーリンクを実装し、不要な URL パラメーターを隠すことで、開発者はユーザーに送信される電子メールのセキュリティと美しさを大幅に強化できます。このカスタマイズにより、ブランドの一貫性を高め、アプリケーションの認証プロセスにおけるユーザーの信頼性を向上させる機会も生まれます。