버튼으로 인증하기

1. 설치하기

ARGOS ID 패키지를 설치하고 나면 모달창을 띄울 수 있는 버튼을 만들 수 있습니다.
ARGOS ID 버튼 생성을 위해서는 Head Tag 에 CSS 파일 1개, JS 파일 1개를 추가하고 <argos-id> 태그를 삽입해야 합니다.
Java, Python, JSP, PHP, Ruby, Asp, JavaScript 등의 개발 언어를 지원 합니다.

1-1. Head 설정하기

ARGOD ID 버튼을 생성하기 위해서는 <argos-id></argos-id> 태그를 필요로 합니다.
태그를 사용하기 위해서는 다음과 같이 CSS 파일 1개, JS 파일 1개가 추가 되어야 합니다.

<head>
		<script defer src="https://id.trustargos.com/bundle.argos-id.js"></script>
		<link href="https://id.trustargos.com/static/css/argos-id.css" rel="stylesheet">
</head>

1-2. ARGOS ID 버튼 생성하기

<body></body>태그 안에 작성해야 합니다.
<argos-id></argos-id>태그에는 총 4가지 속성이 존재합니다.
id와 project는 반드시 입력되어야 합니다.
chains와 button-style은 입력되지 않으면 기본 값으로 설정 됩니다.
- chains의 경우 입력하지 않으면 대시보드에 설정 되어 있는 chain이 출력 됩니다.
- 코드로 설정된 옵션이 대시보드에서 설정된 체인 옵션보다 높은 우선순위를 지닙니다.
- chains 값은 bsc, eth, klay, matic, sol 총 5가지가 가능합니다. “,”로 구분하여 입력해야 하며, 모두 소문자로 표기 해야 합니다.
- chains 의 값은 text로 입력해도 되지만, 동적으로 변경하고자 한다면, chains 의 값에 동적인 변수로 넣어주세요.
- button-style 값은 CSS 사용이 불가능합니다. CSS 사용을 위해서는 영역에 변수로 지정을 한 뒤 CSS를 적용해 주세요.

속성

필수

설명

필수

ARGOS ID 버튼의 ID를 설정합니다.

project

필수

대시보드에 생성된 프로젝트의 ID를 입력합니다.

chains

옵션

연결을 원하는 체인의 종류를 입력합니다.

button-style

옵션

버튼의 CSS 설정을 입력하며, 기존에 있던 버튼 스타일에 오버레이 됩니다.

1-3. 코드 작성 예시

<argos-id></argos-id>만 입력하게 되면 버튼은 생성되지 않으며, 반드시 <script></script>안에 옵션을 설정해 주어야 합니다.
<script></script>태그는 <argos-id></argos-id>태그 아래 영역에 작성해야 합니다.

1-3-1. 기본 설정 코드

<argos-id 
		id = "{id}"
		project = "{projectId}"
		>
</argos-id>

1-3-2. 옵션이 설정된 코드

속성을 동적으로 설정하고 싶다면 밑에 하단 코드의 영역에 변수로 지정한 뒤 옵션 적용을 반드시 해주어야 합니다.
코드 중 <script></script>는 예시 입니다.

<argos-id 
		id= "{id}" 
		project ="{projectId}"
		button-style = "{button-style}"
		chains = "{chains}"
>
</argos-id>
<script>
    const argosIdButton = document.getElementById('id');
    const chains = "bsc,eth,klay"
    argosIdButton.setAttribute('chains', chains)
    argosIdButton.setAttribute('button-style', '{"backgroundColor":"blue", "color":"white"}')
</script>

EX)

<argos-id 
		id="argos-id-button"
		project ="projectId"
		button-style = "{button-style}"
		chains = "{chains}"
>
</argos-id>
<script>
	if (window.location.href.includes('eth') {
				const argosIdButton = document.getElementById('argos-id-button');
		    argosIdButton.setAttribute('chains', 'eth')
	}
</script>

Previous테스트 하기 Next로컬 스토리지

Last updated 1 year ago