Microsoft Graph API를 통한 Azure Web App Service 이메일 전송 문제

Ethan Guerin
2024년 3월 17일 일요일 오전 1:25:11
Azure

Azure Web Apps의 이메일 전송 문제 살펴보기

Office365의 Exchange Online을 통해 이메일을 관리하기 위한 웹 응용 프로그램을 개발할 때 개발자는 이메일, 일정, 연락처 등에 액세스하는 포괄적인 기능으로 인해 Microsoft Graph API를 선택할 수 있습니다. 그러나 이 접근 방식에는 고유한 문제가 수반됩니다. 특히 애플리케이션이 이메일을 보내거나 사서함에서 메시지를 검색하는 등의 작업을 수행하기 위해 앱 전용 액세스가 필요한 경우 더욱 그렇습니다. 앱 전용 액세스를 설정하는 프로세스에는 Azure에 애플리케이션을 등록하고, 특정 권한을 부여하고, 동의를 얻는 과정이 포함되며 이는 원활한 통합에 중요합니다.

그러나 로컬 개발 중에 발생하는 일반적인 장애물은 "기밀 클라이언트는 크로스 클라우드 요청에서 지원되지 않습니다." 오류입니다. 이 오류는 구성 또는 환경 문제를 가리키며 철저한 테스트 없이 클라우드에 애플리케이션을 배포하는 것과 로컬 디버깅의 타당성에 대한 우려를 불러일으킵니다. 딜레마는 이 인증 오류의 근본 원인을 식별하고 이메일 작업에 Microsoft Graph API를 활용하는 Azure 웹 애플리케이션을 디버깅 및 배포하기 위한 모범 사례를 결정하는 데 있습니다.

명령 설명
const express = require('express'); 서버를 생성하기 위해 Express 프레임워크를 가져옵니다.
const msal = require('@azure/msal-node'); Azure AD 인증을 처리하기 위해 Node.js용 MSAL(Microsoft 인증 라이브러리)을 가져옵니다.
const fetch = require('node-fetch'); Node.js에서 HTTP 요청을 만들기 위해 node-fetch 라이브러리를 가져옵니다.
const app = express(); 새로운 Express 애플리케이션을 초기화합니다.
app.use(express.json()); Express 앱이 들어오는 요청을 JSON 개체로 인식하도록 지시합니다.
const config = { ... }; 클라이언트 ID, 테넌트 ID 및 클라이언트 암호를 포함하여 MSAL 인증 클라이언트에 대한 구성 설정을 정의합니다.
const cca = new msal.ConfidentialClientApplication(config); 지정된 구성을 사용하여 새 MSAL 기밀 클라이언트 애플리케이션을 초기화합니다.
app.post('/send-email', async (req, res) =>app.post('/send-email', async (req, res) => { ... }); 이메일 전송 로직을 비동기적으로 처리하는 POST 엔드포인트 '/send-email'을 정의합니다.
cca.acquireTokenByClientCredential({ scopes: ['https://graph.microsoft.com/.default'], }); 지정된 범위에 대한 클라이언트 자격 증명 흐름을 사용하여 토큰을 획득합니다.
fetch('https://graph.microsoft.com/v1.0/me/sendMail', { ... }); 이메일을 보내기 위해 Microsoft Graph API에 POST 요청을 보냅니다.
app.listen(port, () =>app.listen(port, () => console.log(\`Server running on port ${port}\`)); 서버를 시작하고 지정된 포트에서 수신 대기합니다.

이메일 서비스 통합 이해

프런트엔드 스크립트는 사용자를 위한 초기 인터페이스 역할을 하며 사용자가 보내기 전에 수신자의 이메일 주소와 메시지 내용을 입력할 수 있도록 해줍니다. 사용자 작업, 특히 버튼 클릭으로 트리거되는 'sendEmail' 기능을 처리하기 위해 HTML 구조와 JavaScript를 사용합니다. 이 기능은 양식 데이터를 수집하고 이메일 요청 처리를 위해 지정된 엔드포인트인 '/send-email'에 대한 fetch API 호출을 통해 이를 백엔드로 보냅니다. 이는 비차단 사용자 경험을 보장하기 위해 웹 애플리케이션의 비동기 특성을 준수하면서 클라이언트 브라우저에서 서버측 로직과 상호 작용하는 기본적이면서도 효과적인 방법을 보여줍니다.

Express 프레임워크를 사용하여 Node.js에서 개발된 백엔드 스크립트는 핵심 기능이 있는 곳입니다. 프런트엔드에서 요청을 받으면 MSAL(Microsoft 인증 라이브러리)을 사용하여 클라이언트 자격 증명 흐름을 통해 Azure AD에 인증합니다. 이 인증 모델은 사용자의 직접적인 개입이 불필요한 서버 간 상호 작용에 적합하므로 웹 애플리케이션에서 이메일을 보내는 것과 같은 자동화된 프로세스에 적합합니다. 인증되면 스크립트는 필요한 헤더와 JSON 형식의 전자 메일 콘텐츠를 포함하여 Microsoft Graph API의 '/sendMail' 엔드포인트에 POST 요청을 구성하고 보냅니다. async-await 구문을 사용하면 작업이 순차적으로 수행되어 이메일 전송을 시도하기 전에 토큰 획득을 기다리므로 네트워크 요청의 비동기 특성을 적절하게 관리할 수 있습니다.

이메일 서비스 상호작용을 위한 인터페이스

HTML 및 자바스크립트

<html>
<body>
    <form id="emailForm">
        <input type="email" id="recipient" placeholder="Recipient Email"/>
        <textarea id="message" placeholder="Your message here"></textarea>
        <button type="button" onclick="sendEmail()">Send Email</button>
    </form>
    <script>
        function sendEmail() {
            const recipient = document.getElementById('recipient').value;
            const message = document.getElementById('message').value;
            // Assuming there is a backend endpoint '/send-email'
            fetch('/send-email', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ recipient, message }),
            })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch((error) => console.error('Error:', error));
        }
    </script>
</body>
</html>

이메일 전달을 위한 백엔드 서비스

Node.js 및 익스프레스

const express = require('express');
const msal = require('@azure/msal-node');
const fetch = require('node-fetch');
const app = express();
app.use(express.json());

const config = {
    auth: {
        clientId: 'YOUR_CLIENT_ID',
        authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID',
        clientSecret: 'YOUR_CLIENT_SECRET',
    },
};
const cca = new msal.ConfidentialClientApplication(config);

app.post('/send-email', async (req, res) => {
    try {
        const tokenResponse = await cca.acquireTokenByClientCredential({
            scopes: ['https://graph.microsoft.com/.default'],
        });
        const { recipient, message } = req.body;
        const sendEmailResponse = await fetch('https://graph.microsoft.com/v1.0/me/sendMail', {
            method: 'POST',
            headers: {
                'Authorization': \`Bearer ${tokenResponse.accessToken}\`,
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                message: {
                    subject: 'Hello from EmailService',
                    body: {
                        contentType: 'Text',
                        content: message,
                    },
                    toRecipients: [{ emailAddress: { address: recipient } }],
                },
                saveToSentItems: 'true',
            }),
        });
        if (sendEmailResponse.ok) {
            res.json({ message: 'Email sent successfully' });
        } else {
            throw new Error('Failed to send email');
        }
    } catch (error) {
        console.error(error);
        res.status(500).json({ error: 'Internal Server Error' });
    }
});

const port = 3000;
app.listen(port, () => console.log(\`Server running on port ${port}\`));

클라우드 간 인증 문제 탐색

특히 Azure Web App 서비스의 기밀 클라이언트와 관련된 클라우드 간 요청의 복잡성은 다양한 클라우드 환경 전반의 정교한 보안 조치 및 호환성 문제를 밝혀줍니다. "기밀 클라이언트는 교차 클라우드 요청에서 지원되지 않습니다." 오류는 일반적으로 기밀 클라이언트로 구성된 Azure 애플리케이션이 애플리케이션이 등록된 위치와 다른 클라우드 환경의 리소스에 액세스하려고 시도할 때 발생합니다. 이 시나리오는 리소스가 Microsoft Azure 및 Office 365 환경을 비롯한 다양한 클라우드 플랫폼에 걸쳐 있는 하이브리드 또는 다중 클라우드 아키텍처에서 특히 일반적입니다. 개발자가 안전하고 기능적인 솔루션을 설계하려면 클라우드 간 상호 작용의 경계와 제한 사항을 이해하는 것이 중요합니다.

이러한 문제를 해결하기 위해 개발자는 테넌트 ID, 서비스 엔드포인트 및 이러한 환경에서 리소스에 액세스하는 데 필요한 특정 권한의 미묘한 차이를 이해하는 것을 포함하여 클라우드 서비스 구성의 복잡성을 탐색해야 합니다. 또한 조건부 액세스 정책을 활용하고 권한 위임을 이해하면 이러한 오류를 완화하는 데 중요한 역할을 할 수 있습니다. 애플리케이션의 요청이 클라우드 서비스의 보안 및 규정 준수 프로토콜과 일치하는지 확인하는 것이 필수적입니다. 또한 개발자는 원활한 클라우드 간 통신을 촉진하기 위해 프록시 서비스 배포 또는 다중 테넌트 구성 활용과 같은 대체 접근 방식이나 아키텍처를 고려해야 할 수도 있습니다.

Azure 이메일 서비스 FAQ

  1. Microsoft 그래프 API란 무엇입니까?
  2. Microsoft Graph API는 Microsoft 클라우드 에코시스템에서 제공되는 데이터, 관계 및 통찰력에 액세스하기 위한 통합 엔드포인트로, 애플리케이션이 이메일 서비스, 사용자 데이터 등과 상호 작용할 수 있도록 해줍니다.
  3. 이메일 서비스를 위해 Azure에 앱을 등록하려면 어떻게 하나요?
  4. 앱을 등록하려면 Azure Portal로 이동하여 "Azure Active Directory", "앱 등록", 마지막으로 "새 등록"을 차례로 선택합니다. 메시지에 따라 앱을 설정하세요.
  5. Microsoft Graph를 사용하여 이메일을 보내려면 어떤 권한이 필요합니까?
  6. 이메일을 보내려면 Mail.Send 권한이 필요합니다. 읽기 및 보내기를 포함한 더 광범위한 액세스를 위해서는 Mail.ReadWrite 및 Mail.Send 권한이 필요합니다.
  7. 사용자 상호 작용 없이 Microsoft Graph를 사용하여 이메일을 보낼 수 있나요?
  8. 예, 클라이언트 자격 증명 흐름을 사용하여 인증하면 직접적인 사용자 상호 작용 없이 이메일을 보낼 수 있으며 이는 자동화된 프로세스 또는 서비스에 이상적입니다.
  9. "기밀 클라이언트는 크로스 클라우드 요청에서 지원되지 않습니다" 오류를 어떻게 처리합니까?
  10. 이 오류로 인해 앱 구성을 조정하여 클라우드 환경의 요구 사항에 올바르게 부합하는지 확인해야 하는 경우가 많습니다. 여기에는 앱 등록 중에 올바른 클라우드 인스턴스를 선택하거나 클라우드 간 요청을 위한 프록시 서비스를 구현하는 것이 포함될 수 있습니다.

Azure 웹 앱 서비스를 Microsoft Graph API와 성공적으로 통합하여 메시지를 보내고 검색하려면 주로 "기밀 클라이언트가 크로스 클라우드 요청에서 지원되지 않습니다." 오류와 같은 여러 기술적 문제를 극복해야 합니다. 이 특정 문제는 앱 등록, 권한 부여 및 인증 흐름 선택에 대한 미묘한 접근 방식이 필요한 Microsoft 에코시스템 내 클라우드 간 상호 작용의 복잡성을 강조합니다. 개발자는 개발 및 테스트를 위해 로컬로 사용하든, 프로덕션을 위해 클라우드에 배포하든 상관없이 애플리케이션이 작동하려는 환경에 맞게 올바르게 구성되었는지 확인해야 합니다. 또한 Azure Active Directory 및 Microsoft Graph API 인증 메커니즘의 기본 원칙을 이해하는 것이 중요합니다. 여기에는 원활하고 안전하며 효율적인 운영을 보장하기 위해 다양한 클라우드 환경의 한계와 기능을 인식하는 것이 포함됩니다. 이 탐구에서는 세심한 구성과 테스트의 중요성뿐만 아니라 Microsoft의 광범위한 클라우드 서비스를 활용하여 응용 프로그램 기능과 사용자 경험을 향상시킬 수 있는 가능성도 강조합니다.