웹 애플리케이션에서 기업 위챗을 통한 자동 로그인 시스템 구현

기업 위챗의 자체 애플리케이션은 이미 배포된 작은 프로그램과 연동될 뿐만 아니라 웹사이트와도 연동이 가능합니다. 이 경우, 웹사이트가 기업 위챗에서 직접 열릴 때 자동 로그인이 필요할 수 있습니다. 기업 환경에서는 효율성이 중요하므로 계정과 비밀번호 입력 없이 기업 위챗의 직원 구조 정보를 통해 로그인하는 시스템이 필요합니다.

작은 프로그램 환경에서는 wx.qy.login API를 사용하여 코드를 얻어 직원 데이터를 요청할 수 있습니다. 하지만 웹 환경에서는 이러한 API를 직접 호출할 수 없으며, 기업 위챗이 제공하는 특정 인터페이스를 사용해야 합니다.

웹 환경을 위한 기업 위챗 인증 로그인 방법

OAuth2 인증 로그인

OAuth2.0 인터페이스를 통해 구성원의 UserId 신원 정보를 얻을 수 있으며, 이를 통해 기업 위챗 터미널에서 열린 웹페이지가 구성원의 신원 정보를 얻어 로그인 단계를 생략할 수 있습니다.

1단계: 웹 인증 링크 구성 및 코드 획득

// 기업 위챗 코드 획득 함수
fetchWechatWorkCode() {
  console.log('===================기업 위챗 사용자 코드 획득 중==========')
  
  // 기업 ID (corpId)
  const corporateId = 'xxxxx'; 
  // 자체 애플리케이션 ID (applicationId)
  const applicationId = 'xxxx'; 
  // 인증 성공 후 리디렉션될 경로 (신뢰할 수 있는 도메인에 미리 추가해야 함)
  const redirectUrl = encodeURI('yourdomain.com/home'); 
  // 상태 파라미터 (선택적)
  const stateParam = 'SECURE_STATE'; 
  
  // 인증 URL 생성
  const authorizationUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${corporateId}&redirect_uri=${redirectUrl}&response_type=code&agentid=${applicationId}&scope=snsapi_base&state=${stateParam}#wechat_redirect`;
  
  // 페이지 리디렉션
  window.location.href = authorizationUrl;
}

이 방법을 통해 코드를 얻은 후, 이 코드를 백엔드에 전달하여 사용자 정보를 얻고 로그인을 처리할 수 있습니다.

주의사항:

• 리디렉션 URL의 도메인은 기업 위챗 자체 애플리케이션의 신뢰할 수 있는 도메인으로 미리 설정해야 합니다.
• 이 방법은 크로스 도메인 문제를 피할 수 있는 장점이 있습니다.

2단계: 코드를 사용하여 현재 접근 직원 정보 획득

// 액세스 토큰 획득
async getAccessToken() {
  try {
    const response = await fetch(`https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=${corporateId}&corpsecret=${applicationSecret}`);
    const data = await response.json();
    
    // 액세스 토큰 저장 (실제 프로덕션 환경에서는 백엔드에서 관리해야 함)
    sessionStorage.setItem('wechat_work_token', data.access_token);
    
    // 토큰 획득 성공 시 사용자 기본 정보 요청
    if (data.errcode === 0) {
      await getUserBasicInfo();
    }
  } catch (error) {
    console.error('액세스 토큰 획득 실패:', error);
  }
}

// 사용자 기본 정보 획득
async getUserBasicInfo() {
  try {
    const token = sessionStorage.getItem('wechat_work_token');
    const code = new URLSearchParams(window.location.search).get('code');
    
    const response = await fetch(`https://qyapi.weixin.qq.com/cgi-bin/user/getuserinfo?access_token=${token}&code=${code}`);
    const userData = await response.json();
    
    // 사용자 ID 저장
    if (userData.errcode === 0) {
      sessionStorage.setItem('employee_id', userData.UserId);
      // 상세 정보 요청
      await getDetailedUserInfo();
    }
  } catch (error) {
    console.error('사용자 기본 정보 획득 실패:', error);
  }
}

보안 고려사항:

• 보안을 위해 액세스 토큰은 백엔드에서 관리해야 하며 프론트엔드에 노출해서는 안 됩니다.
• 실제 프로덕션 환경에서는 코드를 백엔드로 전송하고, 기업 ID 및 애플리케이션 시크릿은 모두 백엔드에 구성해야 합니다.

3단계: 직원 상세 정보 획득

// 사용자 ID를 사용하여 상세 정보 획득
async getDetailedUserInfo() {
  try {
    const token = sessionStorage.getItem('wechat_work_token');
    const userId = sessionStorage.getItem('employee_id');
    
    const response = await fetch(`https://qyapi.weixin.qq.com/cgi-bin/user/get?access_token=${token}&userid=${userId}`);
    const detailedInfo = await response.json();
    
    // 상세 정보 활용 (예: UI 업데이트, 사용자 세션 설정 등)
    console.log('직원 상세 정보:', detailedInfo);
    
    // 여기서부터 로그인 처리 로직 구현
    // 예: 사용자 정보를 애플리케이션 세션에 저장
    processLogin(detailedInfo);
    
  } catch (error) {
    console.error('상세 정보 획득 실패:', error);
  }
}

// 로그인 처리 함수
function processLogin(userInfo) {
  // 애플리케이션 로그인 로직 구현
  // 예: 사용자 정보를 로컬 스토리지에 저장
  localStorage.setItem('user_profile', JSON.stringify(userInfo));
  
  // 메인 페이지로 리디렉션
  window.location.href = '/dashboard';
}

이 흐름을 통해 기업 위챗을 통한 웹 자동 로그인 시스템을 구현할 수 있습니다. 각 단계에서 발생할 수 있는 오류 처리와 보안 고려사항을 주의 깊게 다루어야 합니다.