포럼

Froala Editor에 대한 사용의견을 남기는곳 입니다.
데모는 edit mode demo, inline mode demo에서 체험해 보실 수 있습니다.

[해결] 레이어에 인비저블 리캡챠 작동시키기

이온디 2017.12.22 조회 수 3105 추천 수 0

로마네스크에서 로그인할 때 단순히 레이어를 띄웠는데 저 애드온이 동작하는데요,

저는 회원가입 등에서만 이 애드온이 동작하는데 어떻게 하면 저도 단순히 

어느 페이지에서나 로그인이나 회원가입 레이어를 띄웠을 때 저 애드온이 동작하도록 하려면 어떻게 하면 될까요.


그냥 이렇게 인풋에 해당 코드를 직접 넣으면 되는 거 맞나요?


이렇게 하면 서버에 동작 체크를 어떻게 하는 건지는 모르겠습니다만;

어쨌든 저렇게 하면 될 거 같긴 한데, 저게 잘 될랑가는 모르겠네요.


성공했습니다.

button 을 누르면 구글리캡차가 동작하고, 성공하면 서브밋 펑션을 하도록!;


https://askjong.com/howto/run-multiple-google-recaptcha-on-the-same-page

저 위에 방법으로는 한 페이지에 2개의 폼이 있을 경우 동작을 안하더군요.

이렇게 해서 다 해결했습니다. ㅠㅠ


레이어에서 로그인은 굳이 적용시키고 싶지 않았지만, 리캡챠 애드온을 사용하면 페이지 상관 없이 

로그인을 할 경우 해당 애드온이 동작되는 것 같았습니다. 

회원가입도 회원가입 페이지가 아니더라도 회원가입을 하면 해당 애드온이 동작해야 하는 것 같은데 

이건 아니더라구요. 그래서 회원가입은 별도로 삽입했고,

로그인은 로그인 페이지가 아니면 또 동작을 안하길래-_-; 위 방법으로 했네요.


정리하자면,

1. 리캡챠 애드온 사용

2. 레이아웃 로그인 기능 사용

3. 레이아웃 회원가입 기능 사용

4. 레이아웃 회원가입 기능 사용 시, 리캡챠 애드온 동작 안됨 > 별도 삽입

- 필요해서 삽입함

5. 리캡채 애드온 사용 + 레이아웃 로그인 기능 사용 시, 로그인 안됨 > 리캡챠 애드온 삽입해야 됨. 

- 로그인 안되서 삽입함

6. 한 페이지에 리캡챠가 2개일 경우 별도 삽입하는 방법이 한 개일 때랑은 다름. 2개일 경우 동작하도록 수정함.

7. [질문] 

로그인 페이지일 경우에만 애드온 스크립트가 들어가는 것 같습니다. 

반면 로그인 동작을 할 경우에는 리캡챠를 체크하는 것 같았습니다. 

그래서 5번 과정이 필요했고요. 맞는지요^^;


<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script type="text/javascript" charset="utf-8">
   var onloadCallback = function() {
      var recaptchas = document.querySelectorAll('div[class=g-recaptcha]');

      for( i = 0; i < recaptchas.length; i++) {
         grecaptcha.render( recaptchas[i].id, {
            'sitekey' : '6LeR7z0UAAAAAKJ0-KIU0ZF2klUocET1kd8lheYy',
         });
      }
   }
</script>

8. [문제]

위 소스를 삽입시 기존 애드온에서 리캡챠 스크립트를 못 불러옴...;ㅁ;

[임시방편]

act=로그인 이나 회원가입에서는 제가 쓴 코드를 안 불러오도록 수정해야함.

그럴 경우, 레이아웃 로그인 레이어, 회원가입 레이어에서는 로그인,회원가입 기능이 동작하지 않음;ㅁ;

Profile

3개의 댓글

Profile
라르게덴
2017.12.22

먼가 대단히 많은 고민과 노력이 보이는 글이 하루 사이에 일어났네요;;

급하신 일이 아니라면 저에게 자문을 구하고 응답이 있을때까지 다른 것을 하는게 좋습니다. (효율적으로 저를 이용하십시오.   )


기진곰님이 제작하신 애드온과 제가 만든 애드온의 차이점은 우선 리캡챠 api.js를 불러오는 조건이 다릅니다. 

var $getAct = array(
'dispBoardContent',
'dispBoardWrite',
'dispBoardReplyComment',
'dispBoardModifyComment',
'dispMemberLoginForm',
'dispMemberSignUpForm',
'dispMemberFindAccount',
'procFileDownload'
);
var $postAct = array(
'procBoardInsertDocument',
'procBoardInsertComment',
'procMemberInsert',
'procMemberLogin',
'procMemberFindAccount',
'procMemberFindAccountByQuestion',
'procMemberResendAuthMail'
);

저는 위의 $getAct 액션으로 페이지를 불러오거나 board 모듈에 한해서 스크립트를 호출 하고 있습니다. 만약 초기 페이지가 page 모듈이나 board 모듈이 아니라면 스크립트를 호출하지 않습니다. 필요하다면 page 모듈도 호출 되도록 개선 가능합니다.

var act =
[
'dispBoardWrite',
'procBoardInsertDocument',
'procBoardInsertComment',
'procMemberInsert',
'procMemberLogin',
'procMemberFindAccount',
'procMemberFindAccountByQuestion',
'procMemberResendAuthMail'
];

if(jQuery(val).attr('onsubmit')!='return procFilter(this, window.insert)' &&
jQuery(val).attr('onsubmit')!='return procFilter(this, insert_comment)' &&
act.indexOf(jQuery(val).find('[name=act]').val()) < 0)
{
return true;
}

$getAct 액션 조건 다음으로는 form 태그가 존재하는 대상을 상대로 리캡챠를 호출할지 검사를 진행합니다. 크게는 form안에 hidden action( [name=act] )명이 위의 값인지를 대상으로 합니다. 그리고 procFilter가 위 2가지의 값인 경우만 호출 하도록 되어있습니다.

마지막으로 에디터 안에 있는 로그인 플러그인은 이 애드온으로 동작하지 않고 별도 코드를 이용하여 자체적으로 동작합니다. form 태그도 사용하지 않았기에 ajax나 리캡챠 api로 코딩 되어있습니다. 하지만 애드온에서 선언한 api.js와 key값은 그대로 사용합니다. 왜 그렇게 했냐면 프로알라 에디터의 플러그인 중 팝업 형태의 것은 버튼을 클릭 시에 태그를 생성해 냅니다. 때문에 호출을 하지 않은 상태에서는 코드가 없으니 애드온에서는 처리가 안됩니다.


이온디님께서 저의 애드온을 이용해 리캡챠를 이용하실려면 우선 레이아웃에 form 태그로 되어있는 로그인용 코드를 선언하시고 액션값을 추가하십시오. index.php?act=dispMemberLoginForm 에 출력되는 폼 포멧을 참고하시면 좋습니다.

특정 호출에 의해 생성되는 코드라면 자체 제작하셔야합니다. form 태그를 사용한 로그인 화면을 제작하시겠다면 이 애드온의 규칙을 지키거나 애드온 폴더 안에 있는 invisible_recaptcha_rxe.js 코드의 27번 줄 부터 참고하시면 쉽습니다.

Profile

네 문제가 되는건 페이지에서 작동하는 postAct였어요. 

굳이 페이지에서 불러올 이유는 없어요. 

그런데 제가 만든 건 일반 레이아웃 페이지에서 로그인 동작을 하니깐, 

로그인 화면은 아니지만 postAct에서 애드온 동작이 걸려서 로그인 자체가 안되는 게 문제였어요.

코노리님 리캡차 애드온은 해당 액션에 대해서 설정이 가능한데 라르게덴님 애드온도 

post/getAct 상황에 대해서 조정할 수 있으면 좋겠네요. ;ㅁ;

페이지에서 postAct는 체크를 하지 않는다거나. 

저는 레이아웃에서 로그인을 해버리니깐 여기서 로그인 동작이 애드온 사용을 하는데 구글 리캡차는 동작하지 않아서 로그인이 안되는게 문제여서..


일부러 별도로 리캡차를 삽입시켜서 postAct를 통과시켰어요.


그랬더니 문제는 로그인페이지에서 기존 레이아웃의 리캡차 스크립트랑 서로 충돌이 나서,

로그인 페이지에서는 레이아웃의 로그인 기능은 동작안되는게 문제였고. ㅎ 


그래서 mid로 체크해서 해당 레이아웃 로그인 기능에서 불러오는 스크립트는 동작안하게 하는 걸로 ㅎㅎ

Profile
라르게덴
2017.12.22
@이온디

코노리님이 제작하신 거였군요.

아마도 제가 생각하는 리캡챠의 역할과 코노리님의 생각이 달라서 일 수도 있는데, 제가 생각하는 보안 인증은 서버의 모든 상황에서 동일한 역할을 해야지 보안을 유지 할 수 있는 생각입니다. 즉, 보안 행위의 일관성이 있어야 한다는 것 입니다.

코노리님의 다양한 옵션은 사용자( 운영자 )의 선택에 따라 동작의 차이를 두는 것으로 되어있어서 공격이 들어간다면 적용안한 곳으로 이뤄질 가능성이 있기에 저는 추천하지 않는 방법입니다. (이를테면 비밀번호 찾기를 비적용하고 있는데 누군가가 대량의 사용자 대상으로 비밀번호 찾기 수행을 해온다면??)

리캡챠 api.js를 불러오는 대상을 페이지 모듈 등에서도 동작할 수 있도록 고민해보겠습니다.

에디터
번호 제목 글쓴이 날짜
98 ro.blog.js도 어마어마했네요 1 profile 이온디 2018.01.12
97 썸머노트의 이미지 붙여넣기 기능 중에서 6 profile 이온디 2018.01.12
96 혹시 글이 너무 길어지면 잘리는 증상이 있나요? 1 Artistudy 2018.01.12
95 데모 체험해보다가 의견남겨봅니다! 8 톡시 2018.01.11
94 특정 에디터 컴포넌트를 밖으로 빼내는 방법 있을까요? 5 profile novelic 2018.01.07
93 컴포넌트를 통한 이미지 삽입 시 class가 자동으로 붙는 문의 12 profile novelic 2018.01.05
92 로마네스크 블로그 v1.1.0에서 새로운 기능 imagePasteProcess profile 라르게덴 2018.01.02
91 자바스크립트 모음 사이트 1 profile 이온디 2018.01.01
90 인비저블 캡차 배포는 혹시 안하시나요? 6 profile 이온디 2017.12.26
89 소식 3개(내년 과제) profile 라르게덴 2017.12.25
[해결] 레이어에 인비저블 리캡챠 작동시키기 3 profile 이온디 2017.12.22
87 [해결] Invisible reCAPTCHA - XE 질문드립니다. profile 이온디 2017.12.22
86 프로알라 에디터 구매 문의 입니다 2 마인드핵 2017.12.15
85 이미지 업로드 질문 드립니다. 1 마인드핵 2017.12.13
84 현재 진척 상황 보고(프로알라 2.7.3이 배포되었습니다.) 4 profile 라르게덴 2017.12.12
83 테이블 삽입시 border=0 적용문제 1 비여 2017.12.04
82 수개월 프로알라 에디터를 사용하면서 두가지 의견. 3 pock 2017.11.26
81 포스타입의 글쓰기 화면입니다. 1 profile 이온디 2017.11.21
80 print 시 글자 색이 회색으로 나옵니다. 1 비여 2017.11.10
79 pasteAllowedStyleProps을 사용하지 않고 소스스타일이 그대로 적용할 방법은 없을까요? 3 profile 이온디 2017.11.02
Find Account
  • 이메일 주소로 계정 찾기

    아이디/비밀번호는 가입시 등록한 메일 주소로 알려드립니다. 가입할 때 등록한 메일 주소를 입력하고 "ID/PW 찾기" 버튼을 클릭해주세요.

  • 이메일 주소

    이메일 주소 형식이 올바르지 않습니다.

  • 인증메일 재발송

    인증 메일을 받지 못한 경우 다시 받을 수 있습니다.

  • 이메일 주소

    이메일 주소 형식이 올바르지 않습니다.