SalesforceからGoogle Chatへメッセージを送ってみた

Last updated at 2025-03-11Posted at 2025-03-09

概要

SalesforceからGoogle Chatへメッセージを送信する方法を紹介します。今回は、Lightning Web Component (LWC) と Apex を使用して、簡単なメッセージ送信の手順を説明します。

準備

Google Chat APIの設定とSalesforceの設定を行います。
Google Chat APIは、console.cloud.google.comから、SalesforceはSetupsから行います。

Google Chat APIの設定

まず、Google Chat APIを有効にし、必要な認証情報を取得します。Google Cloud Consoleでプロジェクトを作成し、APIとサービスの認証情報からOAuth 2.0クライアントIDを作成します。

Google Chat APIの有効化

console.cloud.google.com よりログインし、APIs & Servicesより「Google Chat API」を検索し有効化します。

有効化

Projectを作成

console.google.comにログインし、上部３点ドットの箇所をクリックして新規プロジェクトを作成します。

新規Credentialの作成

その次に、認証情報でNew Credentialで新しい認証情報を作成します。

Callback URLの入力

作成例ですが、名前は任意で「Salesforce」とします。また承認済みのリダイレクトURIですが、こちらは、後ほどSalesforce側でAuth. Providerを作成したのち、Callback URLとして表示されるものをコピペします。複数入力可能なので、ProductionとSandboxでそれぞれ違うAuth. ProviderにあるCallback URLを入れておくとどちらのAuth. Providerも対応できます。

Client ID/ Client Secretの取得

また、上記認証画面のAdditional InformationにあるClient IDとClient Secretは、後ほどSalesforce側のAuth. Provider設定で利用します。

Salesforceの設定

Auth. Provider, External Credentials, Named Credentials, Permission Setを設定します。

Auth. Providerの設定

Auth. Providerでは以下のような設定です。上記のClient IDとClient SecretをそれぞれConsumer KeyとConsumer Secretへコピペします。

Field	Value
Authorize Endpoint URL	`https://accounts.google.com/o/oauth2/auth?access_type=offline&approval_prompt=force`
Token Endpoint URL	`https://oauth2.googleapis.com/token`
Default Scopes	`openid email profile https://www.googleapis.com/auth/chat https://www.googleapis.com/auth/chat.spaces https://www.googleapis.com/auth/chat.messages`

また、保存すると下の方にCallback URLが生成されるのでそちらをコピペして、先ほどのCallback URLの入力へコピペして入力しておきます。

External Credentialsの作成

設定でNamed Credentialsで検索した画面で、External Credentials タブをクリック、新規Newボタンを押します。

こちらで新たなExternal Credentialsを作成します。名前は任意ですが、今回はGoogleChatApiと名付けます。Authentication ProtpcolはOAuth 2.0、Authentication Flow TypeはBrowser Flow Identity Providerは先ほど作成したAuth. ProviderのGoogle Chatを選択します。

Named Credentialsを作成

次にExternal Credentialを利用したNamed Credentialsを作成します。
Named Credentialsの画面に戻り、今度はNamed Credentialsのタブを押し、そこの新規を押します。

するとNamed Credentialsの設定画面になるので、そちらを入力します。Labelは、任意ですがGoogleChatApi、URLはhttps://chat.googleapis.com、Enabled for Calloutsは有効 External Credentialは先ほど作成したGoogleChatApiを選択します。

Principalの設定

こちらPrincipalですが、parameter名は任意ですがSpacesと名付けます。Sequence Numberは1, Identity TypeはPer User Principal、Scopeはhttps://googleapis.com/auth/chat です。
Per User Principalにすることで、次のApexでfindDirectMessageがユーザーにおける相手のIDまたはemailアドレスだけでチャットのスペースが絞れることになります。

Per User Principalとすることで、各ユーザーがそれぞれ認証する必要があります。それぞれのユーザーの設定画面から、External Credentialを選び認証を行ってください。

Permission Setを割り当てないとここのAllow Accessはエラーになります。後述するPermission Setの作成で割り当てをユーザーにしてからAllow Accessに再度トライしてみてください。

Apexクラスの作成

次に、Google Chatにメッセージを送信するためのApexクラスを作成します。Methodは２つで findExistingGoogleChatSpace（spaceIdを取得する）、sendGoogleChatMessage (directMessageを送る)です。

GoogleChatApiController

public with sharing class GoogleChatApiController {
    private static final String GOOGLE_CHAT_API_URL = 'callout:GoogleChatApi/v1';
    
    @AuraEnabled
    public static Map<String, Object> findExistingGoogleChatSpace(String chatSpaceName) {
        try {
            HttpRequest req = new HttpRequest();
            String endpoint = GOOGLE_CHAT_API_URL + '/spaces:findDirectMessage?name=users/' + EncodingUtil.urlEncode(chatSpaceName, 'UTF-8');
            req.setEndpoint(endpoint);
            req.setMethod('GET');
            req.setHeader('Content-Type', 'application/json');
            
            Http http = new Http();
            HttpResponse res = http.send(req);

            if (res.getStatusCode() == 200) {
                Map<String, Object> responseBody = (Map<String, Object>) JSON.deserializeUntyped(res.getBody());
                return responseBody;
            } else if (res.getStatusCode() == 404) {
                System.debug('No existing DM space found with the user: ' + chatSpaceName);
            } else {
                System.debug('Failed to retrieve DM space. Response: ' + res.getBody());
            }
        } catch (Exception e) {
            System.debug('Exception occurred while finding existing Google Chat space: ' + e.getMessage());
        }
        return null;
    }

    @AuraEnabled
    public static Map<String, Object> sendGoogleChatMessage(String spaceId, String message) {
        if (String.isEmpty(spaceId) || String.isEmpty(message)) {
            throw new IllegalArgumentException('Space ID and message are required.');
        }
        HttpRequest req = new HttpRequest();
        req.setEndpoint(GOOGLE_CHAT_API_URL + '/' + spaceId + '/messages'); // spaceId is in format as 'spaces/xxxxx'
        req.setMethod('POST');
        req.setHeader('Content-Type', 'application/json');

        Map<String, Object> requestBody = new Map<String, Object>{
            'text' => message
        };        
        req.setBody(JSON.serialize(requestBody));

        Http http = new Http();
        HttpResponse res = http.send(req);
        
        Map<String, Object> resopnseBody = new Map<String, Object>();
        if (res.getStatusCode() != 200 && res.getStatusCode() != 201) {
            throw new CalloutException('Failed to send Google Chat message: ' + res.getBody());
        } else {
            resopnseBody = (Map<String, Object>) JSON.deserializeUntyped(res.getBody());
            return resopnseBody;
        }
    }
}

Lightning Web Component (LWC) の作成

次に、LWCを作成し、ユーザーインターフェースとロジックを構築します。
@wireでuserのEmailを自動取得したり、lightning-record-pickerを活用すると実装が簡単です。

googleChat.html

<template>
    <lightning-card">
        <div class="slds-grid slds-grid_vertical-align-center slds-m-around_x-small">
            <img src={googleChatIcon} width="32" alt="Google Chat" class="slds-m-right_small" />
            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Google Chat</h2>
        </div>
        <div class="slds-m-around_medium">
            <div class="slds-m-bottom_small" style="position:relative;">
                <lightning-record-picker required object-api-name="User" icon-name="standard:user" size="small"
                    label="Send to" placeholder="Search..." filter={filter} value={selectedUserId}
                    display-info={displayInfo} onchange={handleUserChange}></lightning-record-picker>
                <lightning-textarea disabled={messageDisabled} label="Message" value={message}
                    onchange={handleMessageChange}></lightning-textarea>
                <lightning-spinner if:true={isLoading} alternative-text="Loading" size="x-small"></lightning-spinner>
            </div>
            <lightning-button label="Send Message" onclick={handleSendMessage}></lightning-button>
        </div>
    </lightning-card>
</template>

googleChat.js

import { LightningElement, wire, api } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import findExistingGoogleChatSpace from '@salesforce/apex/GoogleChatApiController.findExistingGoogleChatSpace';
import sendGoogleChatMessage from '@salesforce/apex/GoogleChatApiController.sendGoogleChatMessage';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import googleChatIcon from '@salesforce/resourceUrl/GoogleChatIcon';

export default class GoogleChatApi extends LightningElement {
    @api recordId;
    chatSpaceName;
    selectedUserId;
    spaceId;
    message = '';
    messageDisabled;
    isLoading = false;
    googleChatIcon = googleChatIcon;

    @wire(getRecord, { recordId: '$selectedUserId', fields: ['User.Name', 'User.Email'] })
    user({ error, data }) {
        if (error) {
            console.error(error);
        } else if (data) {
            const chatSpaceName = data.fields.Email.value;
            this.getSpaceId(chatSpaceName);
        }
    }

    async getSpaceId(chatSpaceName) {
        const space = await findExistingGoogleChatSpace({ chatSpaceName: chatSpaceName });
        this.spaceId = space.name;
    }

    get filter() {
        return {
            criteria: [
                {
                    fieldPath: 'IsActive',
                    operator: 'eq',
                    value: true
                },
                {
                    fieldPath: 'UserType',
                    operator: 'eq',
                    value: 'Standard'
                },
            ]
        };
    }

    handleUserChange(event) {
        const selectedUserId = event.detail.recordId;
        this.messageDisabled = false;
        this.selectedUserId = selectedUserId;
    }

    handleMessageChange(event) {
        this.message = event.target.value;
    }

    handleSendMessage() {
        if (!this.spaceId || !this.message) {
            this.showToast('Error', 'Space ID and message are required', 'error');
            return;
        }

        this.isLoading = true;
        const baseUrl = window.location.origin;
        const finalMessage = this.message + '\n' + '<' + baseUrl + '/' + this.recordId + '|View in Salesforce>';
        sendGoogleChatMessage({ spaceId: this.spaceId, message: finalMessage })
            .then(() => {
                this.isLoading = false;
                this.showToast('Success', 'Message sent successfully', 'success');
                this.finishSendMessage();
            })
            .catch(error => {
                this.isLoading = false;
                this.showToast('Error', 'Failed to send message', 'error');
                console.error(error);
            });
    }

    showToast(title, message, variant) {
        const event = new ShowToastEvent({
            title,
            message,
            variant
        });
        this.dispatchEvent(event);
    }

    finishSendMessage() {
        this.message = '';
        this.messageDisabled = true;
        this.selectedUserId = null;
        this.spaceId = null;
    }
}

googleChatApi.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>63.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Permission Setの作成

最後に、Permisssion Setを作成します。上記で作成した設定を利用できるPermissionをまとめて、ユーザーに割り当てていくことで利用可能になります。Permission名はGoogleChatApiとします。
External Credential Principal Access (GoogleChatApi - Spaces)

Apex Class Access (GoogleChatApiController)

割り当ては以下のボタンからユーザーを選択して割り当てます。

個人認証

① 右上アイコン
②（個人の）Settings
③（個人の）External Credentials
④ Allow Access
で認証が始まります。利用するユーザーすべて個人で認証するよう依頼してください。Allow Accessを押すとGoogleの認証画面に飛びます。許可するものをExternal CredentialのScopeで設定したものが反映されます。

Allowを押すと、今後はSalesforce側でExternal Access認証の確認がありますので、Confirmします。

上記のPermission Setを個人に割り当てていないと以下のようなエラーが出ます。External Crednetial Principalへのアクセスが付与されていないからですね。Permission Setを先に先制してユーザーに割り当ててから行いましょう。

動作確認

Salesforceにログインし、LWCを配置したページに移動します。
lightning-record-pickerでユーザーを選択し、選択されたUserのspaceIdを取得、メッセージを入力し、「Send Message」ボタンをクリックします。Google Chatにメッセージが送信されることを確認します。

追加要素

追加として、v1/spacesで全てのグループチャットスペースも取得できます。そちらも発展系として利用可能です。
spaces
API Callをなるべく少なくするには、カスタムオブジェクト（private）を作成して一度取得したspaceIdを登録しておき、参照するようにするとAPI callを節約できます。
MessageはCards v2スタイルで送るとより綺麗な通知になりますが、Chat Appから投稿するように設定する必要があるため、もう一手間かかります。
Cards v2
WebhookでもCards v2スタイルで送信できます。Webhookの場合は機能はシンプルですが、各ユーザーがWebhookの登録を行わないといけないので多くの従業員がいる場合はハードルが高いです。
Salesforce x Google Salesforce と Google、Gemini を Agentforce に導入を発表パートナーシップ強化により顧客の選択肢をさらに拡大
とありましたね。 Salesforce x Slack x Google (gemini)と連携していくとより簡単な連携になっていくといいですね。

まとめ

以上で、SalesforceからGoogle Chatへメッセージを送信する方法の紹介は終わりです。LWCとApexを組み合わせることで、簡単にGoogle Chatへのメッセージ送信を実現できます。ぜひ試してみてください。

Brand element guidelines

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up