471141권장표준스타일가이드1575672008-08-26T07:07:20Zhttp://openid.springnote.com/pages/4711412007-09-13T02:00:13Z<blockquote>
<p>OpenID 적용 사이트 (RP, Relying Party, Consumer) 의 사용자 인터페이스 권장 표준 스타일입니다.</p>
</blockquote>
<h2>OpenID 적용 사이트 권장/표준 스타일 가이드</h2>
<p>오픈아이디의 강점은, 표준을 통해 사용자 중심 원칙을 확보하는 데 있습니다. 하지만, 결국, 표준을 업체들이 얼마나 준수해 주느냐에 따라 실제 사용자 경험상의 일관성이 구현된다고 생각합니다.<br />
현재 스펙상의 프로토콜 표준은 따르지 않을 경우, 작동이 안되기 때문에 거의 지켜진다고 봅니다. 하지만, 지원서비스나 제공업체가 같이 지키면 좋을 Best Practice 같은 것은 그 가치를 알고 신경써서 지키지 않으면 쉽게 문제점이 드러나지 않는 것들, 결국, 사용자의 불편이나 불이익으로만 드러나는 것들이 있을 수 있습니다.<br />
오픈마루에서는 내부서비스들의 인증 기반이 모두 오픈아이디이기때문에 이부분에 대해서 간단하지만 내부적으로 정리된 것이 좀 있어서 공유드리고, 함께 발전시켰으면 합니다.<br />
여기 소개드리는 BP 는 거의 스펙 http://openid.net/specs.bml 에서 발췌된 것들입니다.</p>
<ul>
<li>
<h4>OpenID ID 입력폼 / 인증창</h4>
<ul>
<li>스펙상 강제 사항은 아니지만, 사용자 경험상 매우 중요한 부분입니다.</li>
<li>
<p>표준 스타일을 지킬 경우, 자동화된 툴의 혜택을 입을 수 있습니다.</p>
</li>
<li>
<p>권장 UI: <a href="http://wiki.openid.net/OpenID_Login_Box">http://wiki.openid.net/OpenID_Login_Box</a></p>
<ol class="code">
<li><input type="text" <strong>name="openid_identifier"</strong> class="openid_login" /><br />
<br />
input.openid_login {<br />
background: url(http://openid.net/login-bg.gif) no-repeat;<br />
background-color: #fff;<br />
background-position: 0 50%;<br />
color: #000;<br />
padding-left: 18px;<br />
}</li>
</ol>
<ul>
<li>
<p>특히 입력란의 <strong>오픈아이디 로고</strong>는 필수입니다.</p>
<ul>
<li><a href="http://www.myopenid.com/static/openid-icon-small.gif">small OpenID logo</a> (http://www.myopenid.com/static/openid-icon-small.gif)</li>
<li>로고 이미지 소스: <a href="http://openid.net/logos/" title="http://openid.net/logos/" class="external">http://openid.net/logos/</a></li>
</ul>
</li>
</ul>
</li>
<li>
<p>OpenID ID 입력콘트롤 표준 이름 (input name)</p>
<ul>
<li><strong>'openid_identifier'</strong> (1.1 에서는 'openid_url' 이지만 현재 대부분 2.0 이름이 표준처럼 사용됩니다.)</li>
<li>브라우저 자동 완성 등 automation 지원을 받을 수 있습니다.</li>
<li>myID.net jointsignup 이나, myopenid.com affiliate program 등을 활용하려면 필수입니다.</li>
</ul>
</li>
<li>
<p><strong>ID Canonicalization</strong> - 입력된 아이디의 정규화</p>
<ul>
<li>'http://' 등 문맥에 따라서 생략가능한 부분을 완성시켜 주어야 합니다.</li>
<li>마지막으로 모든 서버쪽 redirection 을 따라간 최종 URL 을 claimed ID (제시 ID, 대표 ID) 로 사용합니다.</li>
</ul>
</li>
<li>
<p>(보안) 전통적인 <strong>ID 와 password 를 함께 쓰는 폼을 지양</strong>합니다.</p>
<ul>
<li>특히, 기존 인증기반이 있는 서비스의 경우에, 로칼아이디와 오픈아이디를 한 입력란에 받는 UI 는 위험한 패턴입니다.</li>
<li>오픈아이디 본질상, ID 입력과 인증(password 입력등) 이 분리되는 것을 사용자에게 학습시켜야 합니다.</li>
<li>이러한 UI 는 피싱사이트로 오해받을 수 있습니다.</li>
<li>
<p>서비스는 기존 서비스전용 ID 로그인과 OpenID 로그인을 함께 지원할 수 있으며, 이경우 아래와 같이 분리된 폼을 제공합니다.</p>
<ul>
<li>(참고: <a href="http://netmesh.info/jernst-files/openid/login-dialog.html" title=" OpenID 로그인 대화창 예제들" class="external">OpenID 로그인 대화창 예제들</a> )</li>
</ul>
</li>
<li><img title="goodlogin(1).PNG" class="attachment" src="/pages/471141/attachments/213745" alt="goodlogin(1).PNG" /><span class="xquared_marker" id="xquared_marker_0"></span></li>
</ul>
</li>
<li>
<p>(보안) <strong>인증제공자의 페이지는 반드시 URL 이 확인</strong>되도록 해야 합니다.</p>
<ul>
<li>IDP 인증폼의 URL 은 반드시 사용자에게 보여지도록 해야 합니다.</li>
<li>iframe, 약식-새창, layer 등으로 인증 URL 이 감추어 지면 안됩니다.</li>
<li>이러한 UI 녁시 피싱사이트로 오해받을 수 있습니다.</li>
</ul>
<p> </p>
</li>
<li>
<p>블로그 댓글 등에 표시할 때</p>
<ul>
<li>
<p>오픈아이디 로그인 폼과, 익명 폼을 분리합니다. 특히, 아이디/비번의 아이디를 혼용하지 않습니다.</p>
<ul>
<li><img title="openidcomment.PNG" class="attachment" src="/pages/471141/attachments/213716" alt="openidcomment.PNG" /></li>
</ul>
</li>
<li>
<p>글쓴이 아이덴티티 표시할 때, 인증된 오픈아이디와 익명 글쓴이를 명확히 구분합니다.</p>
<ul>
<li>특히, 오픈아이디 로고는 반드시 인증된 오픈아이디 앞에만 달도록 합니다. (if and only if)</li>
<li><img title="badcomment.PNG" class="attachment" src="/pages/471141/attachments/213723" alt="badcomment.PNG" /></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
by-ndhttp://openidkr.myid.net/http://zieo.myid.net/62